Jquery tooltip plug-in-QTip Summary

QTip is a jquery-based tooltip plug-in. It supports almost all mainstream browsers, such:

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:

 

 
HtmlCode 
 

 
<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:

 

HTML code

<Div id = "content"> <a href = ""> basic text </a> </div>
 

JS Code:

 

JS Code

 
<SCRIPT type = "text/JavaScript"> $ (document ). ready (function () {$ ('# Content A [href]'). QTip ({content: 'Some basic content for the tooltip '}) ;}); </SCRIPT>
 

 

 

Effect:

2. Title attribute

 

HTML is as follows:

 

HTML code

 
<Div id = "content"> <a href = "" Title = "That sounds familiar..."> title attribute </a> </div>
 

JS Code:

 

<SCRIPT type = "text/JavaScript"> $ (document ). ready (function () {$ ('# Content A [href] [title]'). QTip ({content: {text: false}, style: 'cream'}) ;}); </SCRIPT>
 

 

Effect:

 

3. Image

 

HTML is as follows:

 

HTML code

 
<Div id = "content"> <a href = ""> image </a> </div>
 

 

 

JS Code:

 

JS Code

<SCRIPT type = "text/JavaScript"> $ (document ). ready (function () {$ ('# Content A [href]'). QTip ({content: ''}) ;}</SCRIPT>
 

 

Effect:

 

4. Corner values

 

HTML is as follows:

 

HTML code

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

 

JS Code:

 

<SCRIPT type = "text/JavaScript"> var corners = 'bottomleft'; var opposites = 'topright'; $ (document ). ready (function () {$ ('# Content '). hover (function () {events (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

 

HTML is as follows:

 

HTML code

 
<Div id = "content">  </div>
 

 

JS Code:

 

JS Code

 
<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:

 

 
<Style type = "text/CSS"> # Content IMG {float: Left; margin-Right: 35px; Border: 2px solid #454545; padding: 1px ;}</style>
 

 

 

Effect:

 

6. Loading html

 

HTML is as follows:

 

HTML code

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

JS Code:

 

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: 'unfocused ', style: {tip: True, border: {width: 0, radius: 4 }, name: 'light ', width: 570 }}) ;}); </SCRIPT>
 

 

Effect:

 

7. Modal tooltips

 

HTML is as follows:

 

 
<Div id = "content"> <a href = "#" rel = "Modal"> click here </a> </div>
 

 

JS Code:

 

<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-blancet '). 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: '000000', opacity: 100%, backgroundcolor: 'black', zindex: 0.7 }). appendto (document. body ). hide () ;}); </SCRIPT>

 

Effect: