给ZblogPhp添加个性化title样式

鼠标如果停留在有title属性的链接上，会有个提示框出来，但默认的那个不太好看，可以进一步去美化。本文就是讲述如何通过js美化这个title提示框。

这功能比较常见，而且觉得比较好看，样子是这样的：

原本本站是用上这功能了的，但是，在pjax下会有问题：例如你有一篇很长很长的文章，在手机下阅读，拖动到最下面，然后点击一个带有title属性的链接，这功能正常显示出来，但是在跳转的页面后，这个title提示框还是存在的！！想了一下没什么好办法，就先把这功能去掉，顺便写篇文章记录一下，说不定以后要用到呢？

不多说，开始步骤吧：

1、检查你网站有没有引入jquery，要1.7版本以上的，如果没有，请全局引入（如果你程序是ZblogPhp，那跳过这一步，系统自带有jquery，不需要另外引入，其他程序看情况。）：

新浪CDN提速，也可以下载到本地再引入：
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.js"></script>

2、添加下面JS代码到你网站上，注意，这段代码必须要在上面的jquery后面加载。

<script>
function hooktooltip() {
$('*').each(function(i){if(this.title){var aTitle=this.title;$(this).mouseover(function(e){this.title='';$('body').append('<div id="tooltip">'+aTitle+'</div>')
;$('#tooltip').css({left: (e.pageX+30)+'px',top:(e.pageY+5)+'px',opacity:"0.8"
}).show(250)
}).mousemove(function(e) {
$('#tooltip').css({left: (e.pageX+30)+'px',top:(e.pageY+5)+'px'
})}).mouseout(function() {
this.title=aTitle;$('#tooltip').remove()
}).mousemove(function(e) {
$('#tooltip').css({left: (e.pageX+30)+'px',top:(e.pageY+5)+'px'
})})}});}
hooktooltip();
</script>

3、添加下面CSS代码到你主题CSS文件中：

#tooltip {
	background:#000000;
	color:#FFFFFF;
	text-align:center;
	margin-right:10px;
	position:absolute;
	z-index:9999;
	display:none;
	box-shadow:0 0 5px #000000;
	border:1px dashed #FFFFFF;
	padding:3px 8px;
	font-size:12px;
}

至此，个性化title属性提示框已经做好了，刷新一下看效果吧。CSS样式可以随便调成你喜欢的样子。