程序喵话不多说，直接放代码
JS代码方式控制
//tooltip
tooltip();
function tooltip() {
$("a,div,li,h3,h4,img,i").each(function() {
$("#tooltip").remove();
if (this.title) {
var a = this.title;
$(this).mouseover(function(b) {
this.title = "";
$("body").append('<div id="tooltip">' + a + "</div>");
$("#tooltip").css({
left: b.pageX - 15 + "px",
top: b.pageY + 30 + "px",
opacity: "0.8"
}).fadeIn(250)
}).mouseout(function() {
this.title = a;
$("#tooltip").remove()
}).mousemove(function(a) {
$("#tooltip").css({
left: a.pageX - 15 + "px",
top: a.pageY + 30 + "px"
})
})
}
})
}CSS
ition:absolute;z-index:9999;display:none;padding:4px 8px;border:1px solid rgba(255,255,255,0.25);border-radius:3px;background-color:#0c0;color:#fff;text-align:center;font-size:12px;}
#tooltip:before{position:absolute;top:-6px;left:15px;width:0;height:0;border:6px dashed #0c0;border-top:0;color:#fff;content:' ';line-height:0;border-bottom-style:solid;border-left-color:transparent;border-right-color:transparent;}默认效果
修改之后效果
jQuery方式控制
//个性title提示<i></i>样式
$(function() {
$("a").each(function(b) {//这里是控制标签
if (this.title) {
var c = this.title; //把title的赋给自定义属性 myTilte ，屏蔽自带提示
var a = 30; //设置提示框相对于偏移位置，防止遮挡鼠标
$(this).mouseover(function(d) { //鼠标移上事件
this.title = "";
$("body").append('<div id="<i></i>tooltip">' + c + "</div>"); //创建提示框,添加到页面中
$("#tooltip").css({
left: (d.pageX + a) + "px",
top: d.pageY + "px",
opacity: "0.8"
}).show(250) //设置提示框的坐标，并显示
}).mouseout(function() { //鼠标移出事件
this.title = c; //重新设置title
$("#tooltip").remove() //移除弹出框
}).mousemove(function(d) { //跟随鼠标移动事件
$("#tooltip").css({
left: (d.pageX + a) + "px",
top: d.pageY + "px"
})
})
}
})
});CSS
/* 个性title提示样式 */
#tooltip{background:#DDD;color:#000000;text-align:center;margin-right:10px;position:absolute;z-index:9999;display:none;box-shadow:0 0 5px #666;border:1px dashed #FFF;padding:3px 8px;font-size:12px;}示例
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">
//个性title提示样式
$(function() {
$("a").each(function(b) {//这里是控制标签
if (this.title) {
var c = this.title; //把title的赋给自定义属性 myTilte ，屏蔽自带提示
var a = 30; //设置提示框相对于偏移位置，防止遮挡鼠标
$(this).mouseover(function(d) { //鼠标移上事件
this.title = "";
$("body").append('<div id="tooltip">' + c + "</div>"); //创建提示框,添加到页面中
$("#tooltip").css({
left: (d.pageX + a) + "px",
top: d.pageY + "px",
opacity: "0.8"
}).show(250) //设置提示框的坐标，并显示
}).mouseout(function() { //鼠标移出事件
this.title = c; //重新设置title
$("#tooltip").remove() //移除弹出框
}).mousemove(function(d) { //跟随鼠标移动事件
$("#tooltip").css({
left: (d.pageX + a) + "px",
top: d.pageY + "px"
})
})
}
})
});
</script>
<style type="text/css">
/* 个性title提示样式 */
#tooltip{background:#DDD;color:#000000;text-align:center;margin-right:10px;position:absolute;z-index:9999;display:none;box-shadow:0 0 5px #666;border:1px dashed #FFF;padding:3px 8px;font-size:12px;}
</style>
</head>
<body style="padding: 30px;">
<a href="#" title="鼠标放这里">Hello World</a>
</body>
</html>
未经允许请勿转载：程序喵 » JS和jQuery实现个性化标题title属性中漂亮的tooltip气泡提示美化框