Introducing a good jquery plug-in-cluetip

SometimesArticleFor example, when you move the mouse over the keyword, a text or image is displayed.

Use a jquery plug-in cluetip,

Download address:Plugins.learningjquery.com/cluetip/demo/

The following describes the usage:

1 first of all, of course, we need to put the basic Js of jquery and the Js of this plug-in, such:

<A class = "title" href = "#" Title = "this is the title | the first set of contents comes after the first delimiter .....

$ ('A. title'). cluetip ({splittitle: '| '});

This will pop up a box with the title "this is the title, the content is |"

2. the pop-up content is a connection, for example
<A class = "Basic" href = "ajax.htm" rel = "ajax.htm">

$ ('A. Basic '). cluetip ();

3. Define the height of the pop-up box:

<A class = "custom-width" href = "ajax3.htm" rel = "ajax3.htm">

$ ('A. Custom-width'). cluetip ({width: '200px ', showtitle: false });

 

4 when the mouse moves to a connection, the following pop-up occurs:

<H4 Title = "fancy title! "Id =" ajax3.htm "> hover over me </H4>

$('H4 '). cluetip ({attribute: 'id', hoverclass: 'highlight '});

 

5. A prompt is displayed only when the user actively clicks the connection.
<A href = "ajaxclick.htm" rel = "ajax5.htm" Title = "active ingredients">

$ ('# Clickme'). cluetip ({activation: 'click', width: 650 });

6 rounded corners
<A href = "ajax4.htm" Title = "| First line body | second line body">

$ ('Ol. rounded a: eq (0) '). cluetip ({splittitle:' | ', dropshadow: false, cluetipclass: 'rounded', showtitle: false });