Jquery實現自定義tooltip示例代碼

2024-05-06 16:00:44

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了Jquery實現自定義tooltip的方法,需要的朋友可以參考下

Jquery實現自定義tooltip,具體代碼如下

復制代碼代碼如下:

<%@ 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偏移鼠標的橫坐標
var y = 20; //tooptip偏移鼠標的縱坐標
var myTitle;
//1. 鼠標移至新聞，去掉系統默認的tooltip，自定義tooltip
//2. 鼠標移出新聞，還原系統默認的tooltip，移除自定義的tooltip
//3. 鼠標在新聞上移動，設置自定義的tooltip的位置
$("a.tooltip").mouseover(function (e) {
myTitle = this.title;
this.title = "";
var tooltip = "<div>" + 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 runat="server">
<div >
<ul>
<li><a href="#" title="秋裝百搭小馬甲不到50元.">秋裝百搭小馬甲不到50元.</a></li>
<li><a href="#" title="夏末雪紡店主含淚大甩賣.">夏末雪紡店主含淚大甩賣.</a></li>
<li><a href="#" title="48元長款針織小開衫賣瘋啦.">48元長款針織小開衫賣瘋啦.</a></li>
<li><a href="#" title="長袖雪紡衫單穿內搭都超美.">長袖雪紡衫單穿內搭都超美.</a></li>
</ul>
</div>
</form>
</body>
</html>