思路：

1.首先要定位實現這種效果的元素 ，本次通過class

2.如果是動態顯示不同的提示內容，需設置title

3.通過JQ給定位到元素加上 mouseover 和mouseout 事件

4.再完善下，彈出框跟隨鼠標在目標元素上移動

5.再把 mouseover 、mouseout 合并成 hover

復制代碼 代碼如下:

//頁面加載完成
$(function () {
var x = 10;
var y = 20; //設置提示框相對于偏移位置，防止遮擋鼠標
$(".prompt").hover(function (e) { //鼠標移上事件
this.myTitle = this.title; //把title的賦給自定義屬性 myTilte ，屏蔽自帶提示
this.title = "";
var tooltipHtml = "<div>" + this.myTitle + "</div>"; //創建提示框
$("body").append(tooltipHtml); //添加到頁面中
$("#tooltip").css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}).show("fast"); //設置提示框的坐標，并顯示
}, function () { //鼠標移出事件
this.title = this.myTitle; //重新設置title
$("#tooltip").remove(); //移除彈出框
}).mousemove(function (e) { //跟隨鼠標移動事件
$("#toolti").css({ "top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
});
});
});