This article mainly introduces jquery implementation of custom ToolTip method, the need for friends can refer to the following
jquery implements custom ToolTip, specific code as follows code as follows: <%@ Page language= "C # autoeventwireup=" true "codebehind=" Default.aspx.cs "inherits=" Webapplication247.default "%> <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <head runat=" Server "> < title></title> <style type= "text/css" > #tooltip { position:absolute; border:1px solid #333; background: #f7f5d1; padding:1px; color: #333; display:none; } </style> <script src= "scripts/jquery-1.4.1.min.js" type= "Text/javascript" ></script> <script language= "javascript" type= "Text/javascript" > $ (function () { var x =;//tooltip offset mouse Horizontal axis var y = 20; Tooptip offsets the ordinate of the mouse var mytitle; //1. The mouse moves to the news, removes the system default ToolTip, the custom tooltip //2. Move the mouse out of the news, restore the systemThe default tooltip is to remove the custom tooltip //3. The mouse moves on the news, setting the custom ToolTip position $ ("A.tooltip"). MouseOver (function (e) { myTitle = this.title; This.title = "" "; var tooltip =" <div id= ' tooltip ' style= ' background:lightblue; ' > "+ myTitle + </div>"; $ ("Body"). Append (tooltip); $ ("#tooltip"). CSS ({ "Top": (E.pagey + y) + ' px ', ' left ': (E.pagex + x) + "px" }). Show ("Fast"); }). mouseout (function () { this.title = Mytitl e; $ ("#tooltip"). Remove (); }). MouseMove (function (e) { $ ("#tooltip"). CSS ({ "Top": (E.pagey + y) + "px", "Left": (E.pagex + x) + "px" }); }); }); </script> </head> & lt;body> <form id= "Form1" runat= "Server" > <div class= "Scrollnews" > <ul> <li><a href= "#" class= "tooltip" title= "Sweet baggy sweater must be red this autumn." > Sweet loose Sweater this autumn must be red .</a></li> <li><a href= "#" class= "tooltip" title= "Autumn outfit hundred small vest less than 50 yuan."> Autumn outfit hundred Small vest less than 50 yuan .</a></li> <li><a href=" # "class=" tooltip "title=" slim Korean version of the small suit million people crazy Rob. > Slim Korean version of the small suit million people crazy Rob .</a></li> <li><a href= "#" class= "tooltip" title= "The late summer chiffon shopkeeper tearful big sale." > Late summer chiffon shopkeeper tearful big sale .</a></li> <li><a href= "#" class= "tooltip" title= "Ruili are wildly recommended autumn outfit." > Ruili are wildly recommended autumn outfit .</a></li> <li><a href= "#" class= "tooltip" title= "48 yuan large knitted small shirts sold crazy." >48 yuan long knitted small shirts sell crazy .</a></li> <li><a href= "#" class= "tooltip" title= "" The long-sleeved chiffon shirt is all super beautiful. " > Long sleeve chiffon sweater single wear inner lap are super beautiful .</a></li> </ul> </div> </form> </body > </html> Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
