QTip tooltip plug-in based on jquery [good compatibility]

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:

CopyCode The 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 code The 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 code The 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 codeCopy codeThe Code is as follows: <Div id = "content">
<A href = "#" rel = "sample.html"> click me </a>
</Div>

JS Code:

Copy code The 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 codeCopy codeThe Code is as follows: <Div id = "content">
<A href = "#" rel = "Modal"> click here </a>
</Div>

JS Code: Copy code The 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>