为WordPress添加个性title提示样式

首先需要一个JS如下：

$(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"
})
})
}
})
});

其次就是对title进行样式化了，CSS如下：

#tooltip{background:#000000;color:#fff;text-align:center;margin-top:35px;margin-left:-15px;position:absolute;z-index:9999;display:none;box-shadow:0 0 5px #666;padding:3px 8px;font-size:12px;}

——————————————————————————————————————————
JS脚本可以保存放到主题文件夹下，并且在footer.php下面之前调用，调用语句为：

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/title.js"></script>

这里js脚本放在了主题文件下的js文件夹里面！

最终效果如图：

下面是 title.js 下载地址