当前位置: 编程技术>WEB前端
Jquery实现自定义tooltip示例代码
来源: 互联网 发布时间:2014-08-25
本文导语: Jquery实现自定义tooltip,具体代码如下 代码如下: #tooltip { position:absolute; border:1px solid #333; background:#f7f5d1; padding:1px; color:#333; display:none; } $(function () { var x = 10; //tooltip偏移鼠标的横坐标 var y = 20; //tooptip偏移鼠标的纵坐标 var...
Jquery实现自定义tooltip,具体代码如下
#tooltip
{
position:absolute;
border:1px solid #333;
background:#f7f5d1;
padding:1px;
color:#333;
display:none;
}
$(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 = "
$("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"
});
});
});
代码如下:
#tooltip
{
position:absolute;
border:1px solid #333;
background:#f7f5d1;
padding:1px;
color:#333;
display:none;
}
$(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 = "
" + myTitle + "
"; $("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"
});
});
});