Use Jquery to customize tooltip. The Code is as follows:
Copy codeThe 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 offset the abscissa of the mouse
Var y = 20; // tooptip offset the vertical coordinate of the mouse
Var myTitle;
// 1. move the cursor to the news, remove the default tooltip, and customize the tooltip.
// 2. move the cursor out of the news, restore the default tooltip of the system, and remove the custom tooltip.
// 3. Move the mouse over the news and set the position of the custom 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 = "Make sure your sweater is red this autumn."> make sure your sweater is red this autumn. </a> </li>
<Li> <a href = "#" class = "tooltip" title = "no more than 50 yuan for autumn vests. "> in autumn, the minimum cost of a dedicated vest is less than 50 RMB. </a> </li>
<Li> <a href = "#" class = "tooltip" title = "Korean slim Korean small suits are snapped up."> Korean slim Korean suits are snapped up. </a> </li>
<Li> <a href = "#" class = "tooltip" title = "late summer chiffon shopkeepers sold in tears. "> in the late summer, the chiffon shopkeepers sold in tears. </a> </li>
<Li> <a href = "#" class = "tooltip" title = "Ruili's autumn clothes are crazy to recommend. "> the autumn clothes That Lili recommends are crazy. </a> </li>
<Li> <a href = "#" class = "tooltip" title = "48 yuan long knit cardigan sold crazy. "> 48 yuan long knit cardigan sold crazy. </a> </li>
<Li> <a href = "#" class = "tooltip" title = "long-sleeved chiffon shirts with single-wear styles are superb. "> long-sleeved chiffon shirts with a single outfit are superb. </a> </li>
</Ul>
</Div>
</Form>
</Body>
</Html>