Qtip tooltip plug-ins based on jquery [Good compatibility]_jquery

Home: http://craigsworks.com/projects/qtip/

Download: http://craigsworks.com/projects/qtip/download

Example: http://craigsworks.com/projects/qtip/

Qtip is a ToolTip plug-in based on jquery. It almost supports all the mainstream browsers
For example:

Internet Explorer 6.0+
Firefox 2.0+
Opera 9.0+
Safari 3.0+
Google Chrome 1.0+
Konqueror 3.5+

Using Qtip makes it easy to define tip location and style, while Qtip also has a powerful API ...

Before using Qtip, you can simply introduce two JS files:

Copy Code code 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>

Here are a few simple examples.

1, Basic text

The HTML looks like this:

Copy Code code as follows:

<div id= "Content" >
<a href= "" >basic text</a>
</div>

JS Code:

Copy Code code as follows:

<script type= "Text/javascript" >
$ (document). Ready (function ()
{
$ (' #content a[href] '). Qtip (
{
Content: ' Some basic content for the ToolTip '
});
});
</script>

2. Title attribute

The HTML looks like this:

Copy Code code as follows:

<div id= "Content" >
<a href= "" title= "that sounds familiar ..." >title attribute</a>
</div>

JS Code:

Copy Code code as follows:

<script type= "Text/javascript" >
$ (document). Ready (function ()
{
$ (' #content a[href][title] '). Qtip ({
Content: {
Text:false
},
Style: ' Cream '
});
});
</script>

3, Image

The HTML looks like this:

Copy Code code as follows:

<div id= "Content" >
<a href= "" >Image</a>
</div>

JS Code:

Copy Code code as follows:

<script type= "Text/javascript" >
$ (document). Ready (function ()
{
$ (' #content a[href] '). Qtip ({
Content: ' '
});
});
</script>

4, Corner values

The HTML looks like this:

Copy Code code as follows:

<div id= "Content" style= "margin-top:200px;margin-left:200px;" >
<a href= "" >corner values</a>
</div>

JS Code:

Copy Code code as follows:

<script type= "Text/javascript" >
var corners = ' Bottomleft ';
var opposites = ' topright ';
$ (document). Ready (function ()
{
$ (' #content a ')
. Hover (function ()
{
$ (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

The HTML looks like this:

Copy Code code as follows:

<div id= "Content" >

</div>

JS Code:

Copy Code code 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 code as follows:

<style type= "Text/css" >
#content img{
Float:left;
margin-right:35px;
border:2px solid #454545;
padding:1px;
}
</style>

6, Loading HTML

The HTML looks like this:

HTML code

Copy Code code as follows:

<div id= "Content" >
<a href= "#" rel= "sample.html" >click me</a>
</div>

JS Code:

Copy Code code 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: ' Unfocus ',
Style: {
Tip:true,
border: {
width:0,
Radius:4
},
Name: ' Light ',
width:570
}
})
});
});
</script>

7, Modal tooltips

The HTML looks like this:

HTML code

Copy Code code as follows:

<div id= "Content" >
<a href= "#" rel= "modal" >click here</a>
</div>

JS Code:

Copy Code code 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: ' #666666 '
},
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: ' 100% ',
opacity:0.7,
BackgroundColor: ' Black ',
zindex:5000
})
. Appendto (Document.body)
. Hide ();
});
</script>