背景: 有一个界面元素,当鼠标移动到上面后,动态的显示提示信息。
$("#labelId").mouseover(function (e) {
var leftwidth = getToolTipLeftWidth(e.pageX);
var message = "自定义的提示信息,这里可以当做参数传递进来";
$("body").append("<div id='tooltip' class='tooltip'>" + message + "</div>");//将要显示的内容添加到 新建 div标签中 并追加到 body 中
$("#tooltip")
.css({
//设置 div 内容位置
"top": (e.pageY + 10) + "px",
"position": "absolute",//添加绝对位置
// "left": (e.pageX + 20) + "px"
"left": leftwidth + "px"
// "width": "100px",
// 'height':"80px"
}).show("fast");// show(spe.ed,callback) speed: xian'shi'su'du
}).mouseout(function () { //鼠标指针从 a标签 上离开时 发生mouseout 事件
// this.title = this.Mytitle;
$("#tooltip").remove();//移除对象
}).mousemove(function (e) { //鼠标指针在 a标签 中移动时 发生mouseout 事件
var leftwidth = getToolTipLeftWidth(e.pageX);
var message = "自定义的提示信息,这里可以当做参数传递进来";
$("#tooltip")
.css({
//设置 div 内容位置
"top": (e.pageY + 10) + "px",
"position": "absolute",//添加绝对位置
"left": leftwidth + "px"
});
});
/**
* 计算提示框距离左侧的宽度
*/
function getToolTipLeftWidth(x){
var windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
var leftwidth = x+20;
if(windowWidth - x < 200){
leftwidth = x - 100;
}
return leftwidth;
}
<style>
.tooltip {
position: absolute;
display: none;
z-index: 9900000;
outline: none;
padding: 5px;
border-width: 1px;
border-style: solid;
border-radius: 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
</style>