思路：
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 id='tooltip'>" + 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"
});
});
});