Home: http://craigsworks.com/projects/qtip/
Download: http://craigsworks.com/projects/qtip/download
Example: http://craigsworks.com/projects/qtip/
QTip is a JQuery-based Tooltip plug-in. It supports almost all mainstream browsers
For example:
Internet Explorer 6.0 +
Firefox 2.0 +
Opera 9.0 +
Safari 3.0 +
Google Chrome 1.0 +
Konqueryor 3.5 +
With qTip, you can easily define the tip position and style. qTip also has a powerful API ......
Before using qTip, you only need to introduce two JS files:
Copy codeThe Code is as follows:
<Script type = "text/javascript" src = "jquery-1.3.2.min.js"> </script>
<Script type = "text/javascript" src = "jquery. qtip-1.0.0-rc3.min.js"> </script>
The following are some simple examples.
1. Basic text
Html is as follows:
Copy codeThe Code is as follows:
<Div id = "content">
<A href = ""> Basic text </a>
</Div>
JS Code:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Document). ready (function ()
{
$ ('# Content a [href]'). qtip (
{
Content: 'Some basic content for the tooltip'
});
});
</Script>
2. Title attribute
Html is as follows:
Copy codeThe Code is as follows:
<Div id = "content">
<A href = "" title = "That sounds familiar..."> Title attribute </a>
</Div>
JS Code:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Document). ready (function ()
{
$ ('# Content a [href] [title]'). qtip ({
Content :{
Text: false
},
Style: 'cream'
});
});
</Script>
3. Image
Html is as follows:
Copy codeThe Code is as follows:
<Div id = "content">
<A href = ""> Image </a>
</Div>
JS Code:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Document). ready (function ()
{
$ ('# Content a [href]'). qtip ({
Content: ''
});
});
</Script>
4. Corner values
Html is as follows:
Copy codeThe Code is as follows:
<Div id = "content" style = "margin-top: 200px; margin-left: 200px;">
<A href = ""> Corner values </a>
</Div>
JS Code:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Var corners = 'bottomleft ';
Var opposites = 'topright ';
$ (Document). ready (function ()
{
$ ('# Content ')
. Hover (function ()
{
Certificate (this).html (opposites)
. Qtip ({
Content: corners,
Position :{
Corner :{
Tooltip: corners,
Target: opposites
}
},
Show :{
When: false,
Ready: true
},
Hide: false,
Style :{
Border :{
Width: 5,
Radius: 10
},
Padding: 10,
TextAlign: 'center ',
Tip: true,
Name: 'cream'
}
});
});
});
</Script>
5. Fixed tooltips
Html is as follows:
Copy codeThe Code is as follows:
<Div id = "content">
</Div>
JS Code:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Document). ready (function ()
{
$ ('# Content img'). each (function ()
{
$ (This). qtip (
{
Content: '<a href = ""> Edit </a> | <a href = ""> Delete </a> ',
Position: 'topright ',
Hide :{
Fixed: true
},
Style :{
Padding: '5px 15px ',
Name: 'cream'
}
});
});
});
</Script>
Css code:
Copy codeThe Code is as follows:
<Style type = "text/css">
# Content img {
Float: left;
Margin-right: 35px;
Border: 2px solid #454545;
Padding: 1px;
}
</Style>
6. Loading html
Html is as follows:
Html code
Copy codeThe Code is as follows:
<Div id = "content">
<A href = "#" rel = "sample.html"> Click me </a>
</Div>
JS Code:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Document). ready (function ()
{
$ ('# Content a [rel]'). each (function ()
{
$ (This). qtip (
{
Content :{
Url: $ (this). attr ('rel '),
Title :{
Text: 'wiki-'+ $ (this). text (),
Button: 'close'
}
},
Position :{
Corner :{
Target: 'bottommiddle ',
Tooltip: 'topmiddle'
},
Adjust :{
Screen: true
}
},
Show :{
When: 'click ',
Solo: true
},
Hide: 'unfocused ',
Style :{
Tip: true,
Border :{
Width: 0,
Radius: 4
},
Name: 'light ',
Width: 570
}
})
});
});
</Script>
7. Modal tooltips
Html is as follows:
Html code
Copy codeThe Code is as follows:
<Div id = "content">
<A href = "#" rel = "modal"> Click here </a>
</Div>
JS Code:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Document). ready (function ()
{
$ ('A [rel = "modal"]: first '). qtip (
{
Content :{
Title :{
Text: 'modal tooltips sample ',
Button: 'close'
},
Text: 'Hello world'
},
Position :{
Target: $ (document. body ),
Corner: 'center'
},
Show :{
When: 'click ',
Solo: true
},
Hide: false,
Style :{
Width: {max: 350 },
Padding: '14px ',
Border :{
Width: 9,
Radius: 9,
Color: '#000000'
},
Name: 'light'
},
Api :{
BeforeShow: function ()
{
$ ('# Qtip-blanket'). fadeIn (this. options. show. effect. length );
},
BeforeHide: function ()
{
$ ('# Qtip-blanket'). fadeOut (this. options. hide. effect. length );
}
}
});
$ ('<Div id = "qtip-blanket"> ')
. Css ({
Position: 'absolute ',
Top: $ (document). scrollTop (),
Left: 0,
Height: $ (document). height (),
Width: '200 ',
Opacity: 0.7,
BackgroundColor: 'black ',
ZIndex: 5000
})
. AppendTo (document. body)
. Hide ();
});
</Script>
