jquery implementation mouse Follow the hint Layer effect code (can display text, div,table,html, etc.) _jquery

This article describes the jquery implementation of the mouse following the hint layer effect code. Share to everyone for your reference, specific as follows:

The screenshot of the running effect is as follows:

The Web site has a lot to use the tip of the tip layer, combined with jquery jquery.cluetip.js, you can implement the local character or Ajax asynchronous call to display the hint layer. such as the above purchase score details hint. (Advantage: Width needs to call the page load definition, the height of auto, and the triangle specified icon can be based on the size of the display layer position to call its position, to achieve eye-catching and intuitive effect)

Jquery.cluetip.css

/* Global */#cluetip-close img {border:0} #cluetip-title {overflow:hidden} #cluetip-title #cluetip-close {FL
 Oat:right;
position:relative;
 } #cluetip-waitimage {width:43px;
 height:11px;
 Position:absolute; Background-image:url (..
/img_new/cluetipwait.gif);
 }. cluetip-arrows {display:none;
 Position:absolute;
 top:0;
 Left: -11px;
 height:22px;
 width:11px;
 Background-repeat:no-repeat;
background-position:0 0; #cluetip-extra {Display:none}/*************************************** =cluetipclass: ' Default '---------------- ----------------------*/cluetip-default {background-color: #d9d9c2; Cluetip-default #cluetip-outer {position:re
 lative;
 margin:0;
Background-color: #d9d9c2;
 }. Cluetip-default H3#cluetip-title {margin:0 0 5px;
 padding:8px 10px 4px;
 font-size:14px;
 Font-weight:normal;
 Background-color: #87876a;
Color: #fff;
 }. Cluetip-default #cluetip-title A {color: #d9d9c2;
Font-size:0.95em; }. Cluetip-default #cluEtip-inner {padding:10px}. cluetip-default Div#cluetip-close {text-align:right;
 margin:0 5px 5px;
Color: #900; }/* Default arrows/* Clue-right-default. cluetip-arrows {Background-image:url (..
/img_new/cluetipdarrowleft.gif); }. Clue-left-default. cluetip-arrows {Background-image:url (..
 /img_new/cluetipdarrowright.gif);
 left:100%;
Margin-right: -11px; }. Clue-top-default. cluetip-arrows {Background-image:url (..
 /img_new/cluetipdarrowdown.gif);
 top:100%;
 left:50%;
 Margin-left: -11px;
 height:11px; 
width:22px; }. Clue-bottom-default. cluetip-arrows {Background-image:url (..
 /img_new/cluetipdarrowup.gif);
 Top: -11px;
 left:50%;
 Margin-left: -11px;
 height:11px;
width:22px; /*************************************** =cluetipclass: ' Jtip '--------------------------------------* *.
  Cluetip-jtip {background-color:transparent;
Display:none;
 }. Cluetip-jtip #cluetip-outer {border:1px solid #559EF8;
 position:relative;
Background-color: #fff; }
. Cluetip-jtip H3#cluetip-title {margin:0 0 5px;
 PADDING:2PX 5px;
 font-size:12px;
 Font-weight:normal;
 Background-color: #559EF8; 
Color: #fff;
 }. Cluetip-jtip #cluetip-inner {padding:0 5px 5px;
Display:inline-block;
 }. cluetip-jtip Div#cluetip-close {text-align:right;
 margin:0 5px 5px; 
 Color: #900;
Display:none; }/* Jtip arrows/* Clue-right-jtip cluetip-arrows {background-image:url (...
/img_new/cluetiparrowleft.gif); }. Clue-left-jtip. cluetip-arrows {Background-image:url (..
 /img_new/cluetiparrowright.gif);
 left:100%;
Margin-right: -11px; }. Clue-top-jtip. cluetip-arrows {Background-image:url (..
 /img_new/cluetiparrowdown.gif);
 top:100%;
 left:50%;
 Margin-left: -11px;
 height:11px; 
width:22px; }. Clue-bottom-jtip. cluetip-arrows {Background-image:url (..
 /img_new/cluetiparrowup.gif);
 Top: -11px;
 left:50%;
 Margin-left: -11px;
 height:11px;
width:22px; /*************************************** =cluetipclass: ' Rounded '--------------------------------------/* cluetip-rounded {background:transparent URL (..
 /img_new/cluetipbl.gif) no-repeat 0 100%;
 margin-top:10px;
margin-left:12px; }. cluetip-rounded #cluetip-outer {background:transparent url (..
 /img_new/cluetiptl.gif) no-repeat 0 0;
Margin-top: -12px;
 }. cluetip-rounded #cluetip-title {background-color:transparent;
 padding:12px 12px 0;
 margin:0 -12px 0 0;
position:relative;
 }. cluetip-rounded #cluetip-extra {position:absolute;
 Display:block; Background:transparent URL (..
 /img_new/cluetiptr.gif) no-repeat 100% 0;
 top:0;
 right:0;
 width:12px;
 height:30px;
Margin: -12px-12px 0 0; }. cluetip-rounded #cluetip-inner {background:url (..
 /img_new/cluetipbr.gif) no-repeat 100% 100%;
 padding:5px 12px 12px;
 Margin: -18px-12px 0 0;
position:relative;
 }. cluetip-rounded Div#cluetip-close {text-align:right;
 margin:0 5px 5px;
 Color: #009;
Background:transparent; }. cluetip-rounded Div#cluetip-close A {color: #777;}/* Rounded Arrows/clue-right-rounded cluetip-arrows {background-image:url (..
/img_new/cluetiprarrowleft.gif); }. clue-left-rounded. cluetip-arrows {Background-image:url (..
 /img_new/cluetiprarrowright.gif);
 left:100%;
margin-left:12px; }. clue-top-rounded. cluetip-arrows {Background-image:url (..
 /img_new/cluetiprarrowdown.gif);
 top:100%;
 left:50%;
 Margin-left: -11px;
 height:11px; 
width:22px; }. clue-bottom-rounded. cluetip-arrows {Background-image:url (..
 /img_new/cluetiprarrowup.gif);
 Top: -23px;
 left:50%;
 Margin-left: -11px;
 height:11px;
width:22px; }/* Stupid IE6 haslayout hack/cluetip-rounded #cluetip-title,. cluetip-rounded #cluetip-inner {zoom:1; float-le
 ft {float:left;
 Margin-right:. 5em;
 Display:inline;
position:relative;
 }. float-right {float:right;
 Margin-left:. 5em;
 Display:inline;
position:relative;

 }

jquery-1.3.2.min.js --The official web can be downloaded, no longer stated here. Must
jquerycluetipload.js --the definition of the basic parameters and attributes of the hint layer.

/* Jquery mouse follow the hint layer. * Creator: Fooo * Date Created: 09-09-23 * Modified by: * Modified Date: * Local character hint example: <span title= "title |<%=str ()%>" ><a href= "#" > Our ;/a></span> * Ajax Asynchronous call file and hint example: <ol><li><a class= "JT" href= "#" title= "Scoring Item Details" rel= " Handlerajax.ashx?
 Name=<%=security.encryptquerystring ("Our I I I my NPC")%> ">cluetip-ajax asynchronous hint 1</a> </li></ol> * * Change the width of the hint layer, just add in the call page: $.fn.cluetip.defaults.width = ' 100 ';
 -Resize according to size.
 *///$.fn.cluetip.defaults.tracking = true;
$.fn.cluetip.defaults.width = ' auto ';
 $ (document). Ready (function () {//default theme $ (' A.title '). Cluetip ({splittitle: ' | '});
 $ (' A.basic '). Cluetip ();
 $ (' a.custom-width '). Cluetip ({width: ' 200px ', showtitle:false});
 $ (' H4 '). Cluetip ({attribute: ' id ', Hoverclass: ' Highlight '});
 $ (' #sticky '). Cluetip ({sticky:true, closeposition: ' title ', Arrows:true}); $ (' #examples a:eq (5) '). Cluetip ({hoverclass: ' Highlight ', Sticky:true, closeposition: ' Bottom ', closetext: ' <i MG src= ". /img_new/cluetipcross.png "alt=" Close "width=" height= "/> ', truncate:60}";
 $ (' a.load-local '). Cluetip ({local:true, hidelocal:true, Sticky:true, arrows:true, cursor: ' pointer '});
 $ (' #clickme '). Cluetip ({activation: ' click ', Sticky:true, width:250});
 $ (' Ol:first a:last '). Cluetip ({tracking:true}); JTip Theme $ (' A.jt:eq (0) '). Cluetip ({cluetipclass: ' JTip ', Arrows:true, Dropshadow:false, Sticky:true, M Ouseoutclose:true, Closeposition: ' title ', Closetext: '  

More interested readers of jquery-related content can view the site: "jquery date and time Operation tips Summary", "jquery switching effects and techniques summary", "jquery drag-and-drop effect and Skills summary", "JQuery Extended Skills Summary", " jquery Common Classic Effects Summary "jquery animation and special effects usage Summary", "jquery selector usage Summary" and "jquery common Plug-ins and Usage summary"

I hope this article will help you with the jquery program design.