JQuery implements the code (displays text, Div, Table, Html, etc.) with the mouse following the prompt layer (jquery)

This article mainly introduces jQuery's code for implementing the effects of mouse following the prompt layer, and provides functions such as displaying text, Div, Table, and Html. it involves jQuery's related operation skills for mouse events and page elements. For more information, see the example in this article. We will share this with you for your reference. The details are as follows:

The running effect is as follows:

Many Web sites need to use the tip prompt layer. Combined with jquery's jquery. cluetip. js, You can implement local characters or ajax asynchronous call to display the prompt layer. If the purchase score details are displayed. (Advantage: the width must be defined when the page is loaded. The height is auto, and the specified icon in the triangle can be called based on the size and position of the display layer to achieve eye-catching and intuitive effect)

Jquery.cluetip.css

/* global */#cluetip-close img { border: 0;}#cluetip-title { overflow: hidden;}#cluetip-title #cluetip-close { float: 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: relative; 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 p#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 p#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 p#cluetip-close {  text-align: right; margin: 0 5px 5px; color: #009; background: transparent;}.cluetip-rounded p#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-left { 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 network can be downloaded, here not to express. (Required)
JquerycluetipLoad. js -- defines the basic parameters and attributes of the prompt layer.

/* Jquery mouse follows the prompt layer. * Created by: fooo * created on: 09-09-23 * modified by: * modified on: * local character prompt example: "> our * Ajax asynchronous call file and prompt example:
 
 

  
  
"> ClueTip-Ajax asynchronous prompt 1
 
 
** To change the width of the prompt layer, add $. fn. cluetip. defaults. width = '000000' on the call page.-adjust the width according to the 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: '', 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: la '). cluetip ({tracking: true}); // jTip theme $ ('a. jt: eq (0 )'). cluetip ({cluetip Class: 'jtip ', arrows: true, dropShadow: false, sticky: true, mouseOutClose: true, closePosition: 'title', closeText: ''}); $ ('a. jt: eq (1 )'). cluetip ({cluetipClass: 'jtip ', arrows: true, dropShadow: false, hoverIntent: false}); condition ('span%title%'{.css ({borderBottom: '0px solid #100 '}). cluetip ({splitTitle: '|', arrows: true, dropShadow: false, cluetipClass: 'jtip '}); $ ('a. jt: eq (2 )'). cluetip ({cluetipCl Ass: 'jtip ', arrows: true, dropShadow: false, height: '150px', sticky: true, positionBy: 'bottomtop '}); $ ('a. jt: eq (3 )'). cluetip ({local: true, hideLocal: false}); $ ('a. jt: eq (4 )'). cluetip ({cluetipClass: 'jtip ', arrows: true, dropShadow: false, onActivate: function (e) {var cb = $ (' # cb ') [0]; return! Cb | cb. checked ;}}); // Rounded Corner theme $ ('ol. rounded a: eq (0 )'). cluetip ({splitTitle: '|', dropShadow: false, cluetipClass: 'rounded', showtitle: false}); $ ('ol. rounded a: eq (1 )'). cluetip ({cluetipClass: 'rounded', dropShadow: false, showtitle: false, positionBy: 'mouse '}); $ ('ol. rounded a: eq (2 )'). cluetip ({cluetipClass: 'rounded', dropShadow: false, showtitle: false, positionBy: 'bottomtop ', topOffset: 70}); $ ('ol. rounded a: eq (3 )'). cluetip ({cluetipClass: 'rounded', dropShadow: false, sticky: true, ajaxCache: false, arrows: true}); $ ('ol. rounded a: eq (4 )'). cluetip ({cluetipClass: 'rounded', dropShadow: false });});