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

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

给ZblogPhp添加个性化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样式可以随便调成你喜欢的样子。