JQuery plug-in cluetip introduction and download

Sometimes, you need to prompt the keyword of an article. For example, when you move the mouse over the keyword, a text or image is displayed.

Use a jquery plug-in cluetip,

Address download: http://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 '). 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 });