Of Stack

Jquery implements custom tooltip sample code

  • 2020-03-30 01:42:54
  • OfStack
Jquery implementation of a custom tooltip, the code is 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 = 10; //Tooltip offsets the abscissa of the mouse
var y = 20; //The tooptip offsets the ordinate of the mouse
var myTitle; 
//1. Mouse over the news, remove the default tooltip from the system, and customize the tooltip
//2. Mouse out of the news, restore the system's default tooltip, remove a custom tooltip
//3. Move the mouse over the news to set the position of the customized tooltip
$("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 = myTitle; 
$("#tooltip").remove(); 
}).mousemove(function (e) { 
$("#tooltip").css({ 
"top": (e.pageY + y) + "px", 
"left": (e.pageX + x) + "px" 
}); 
}); 
}); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div class="scrollNews" > 
<ul> 
<li><a href="#" class="tooltip" title=" Sweet loose sweater will be red this fall ."> Sweet loose sweater will be red this fall .</a></li> 
<li><a href="#" class="tooltip" title=" Autumn outfit joker small vest less than 50 yuan ."> Autumn outfit joker small vest less than 50 yuan .</a></li> 
<li><a href="#" class="tooltip" title=" Slim Korean version of the small suit ten thousand crazy grab ."> Slim Korean version of the small suit ten thousand crazy grab .</a></li> 
<li><a href="#" class="tooltip" title=" Late summer chiffon shop owner tearful sale ."> Late summer chiffon shop owner tearful sale .</a></li> 
<li><a href="#" class="tooltip" title=" Ruili crazy recommended autumn clothing ."> Ruili crazy recommended autumn clothing .</a></li> 
<li><a href="#" class="tooltip" title="48 Yuan long knit cardigans are selling like crazy .">48 Yuan long knit cardigans are selling like crazy .</a></li> 
<li><a href="#" class="tooltip" title=" Long - sleeved chiffon shirt is beautiful under single wear ."> Long - sleeved chiffon shirt is beautiful under single wear .</a></li> 
</ul> 
</div> 
</form> 
</body> 
</html>
Related articles: