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>
Here are a few more simple examples.
1. Basic text
The HTML looks like this:
The 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>
Effect:
2. Title attribute
The HTML looks like this:
The code is as follows:
<div id= "Content" >
<a href= "" title= "that sounds familiar ..." >title attribute</a>
</div>
JS Code:
The code is as follows:
<script type= "Text/javascript" >
$ (document). Ready (function ()
{
$ (' #content a[href][title] '). Qtip ({
Content: {
Text:false
},
Style: ' Cream '
});
});
</script>
Effect:
3. Image
The HTML looks like this:
The code is as follows:
<div id= "Content" >
<a href= "" >Image</a>
</div>
JS Code:
The code is as follows:
<script type= "Text/javascript" >
$ (document). Ready (function ()
{
$ (' #content a[href] '). Qtip ({
Content: ' '
});
});
</script>
Effect:
4. Corner Values
The HTML looks like this:
The code is as follows:
<div id= "Content" style= "margin-top:200px;margin-left:200px;" >
<a href= "" >corner values</a>
</div>
JS Code:
The code is 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>
Effect:
5. Fixed ToolTips
The HTML looks like this:
The code is as follows:
<div id= "Content" >
</div>
JS 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:
The code is as follows:
<style type= "Text/css" >
#content img{
Float:left;
margin-right:35px;
border:2px solid #454545;
padding:1px;
}
</style>
Effect:
6. Loading HTML
The HTML looks like this:
The code is as follows:
<div id= "Content" >
<a href= "#" rel= "sample.html" >click me</a>
</div>
JS Code:
The code is as follows:
JS Code
<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>
Effect:
7, Modal tooltips
The HTML looks like this:
The code is as follows:
<div id= "Content" >
<a href= "#" rel= "modal" >click here</a>
</div>
JS 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: ' #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>
Effect:
--------------------------------------------------------------------------------------------------------------- -----------------------
Examples
<!doctype html> ToolTip mouse movement appears the picture or text and the title is similar
