灵感来自immmmm：JQuery 学习笔记之：美妙的标题提示
该特效“不但可以让你的 title 提示效果变得美观，而且可以显示出你将要点击的链接的 url，让用户知道自己将要去哪里”，能不能明显提升了用户感受得用户说了算，但我可以肯定的是这绝对能吸引用户的眼球！
jQuery代码，另存为JS或者整合：
$("a").mouseover(function(e){
this.myTitle = this.title;
this.myHref = this.href;
this.myText = $(this).text().toString().substring(0,4);
if((this.myTitle=='')&&(this.myText!='http')) this.myTitle=$(this).text();
this.myHref = (this.myHref.length > 30 ? this.myHref.toString().substring(0,30)+"..." : this.myHref);
this.title = "";
$("#tooltip").remove();
var tooltip = "<div id="tooltip">"+this.myTitle+"<em>"+this.myHref+"</em>"+"</div>";
$('body').append(tooltip);
$('#tooltip').css({"opacity":"0.75","top":(e.pageY-20)+"px","left":(e.pageX+15)+"px"}).show('fast');
}).mouseout(function(){this.title = this.myTitle;$('#tooltip').remove();
}).mousemove(function(e){$('#tooltip').css({"top":(e.pageY-20)+"px","left":(e.pageX+15)+"px"});
});新版特点：
- Title为空、非直接显示http://example.com链接时加入默认提示
- 修复点击后退页面上会一直显示一个Sweet Titile框的错误
- 将提示位置移动到鼠标右侧，这样即使链接在底部也能看见提示
CSS代码：
#tooltip {position:absolute;z-index:1000;max-width:250px;word-wrap:break-word;background:#000;text-align:left;padding:5px;min-height:1em;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;} #tooltip p {color:#fff;font:12px 'Microsoft YaHei',Arial,宋体,Tahoma,Sans-Serif;} #tooltip p em {display:block;margin-top:3px;color:#f60;font-style:normal;}
原版jQuery代码：
jQuery(document).ready(function($){
$("a").mouseover(function(e){
this.myTitle = this.title;
this.myHref = this.href;
this.myHref = (this.myHref.length > 30 ? this.myHref.toString().substring(0,30)+"..." : this.myHref);
this.title = "";
var tooltip = "<div id="tooltip">"+this.myTitle+"<em>"+this.myHref+"</em>"+"</div>";
$('body').append(tooltip);
$('#tooltip').css({"opacity":"0.8","top":(e.pageY+20)+"px","left":(e.pageX+10)+"px"}).show('fast');
}).mouseout(function(){this.title = this.myTitle;$('#tooltip').remove();
}).mousemove(function(e){$('#tooltip').css({"top":(e.pageY+20)+"px","left":(e.pageX+10)+"px"});
});
});P.S.不要忘记加载jQuery库
也想要建立一个独立博客打造自我品牌吗？
如果你喜欢本文或对我的Willin OR Guy感兴趣，请订阅本博客。如何订阅？
版权声明
作者：长岛冰泪，网址：http://www.willin.org/
原文标题：jQuery美妙的标题提示加强版
原文链接：http://www.willin.org/develop/jquery/jquery-sweet-title/
(C) 长岛冰泪 版权所有，转载时必须以链接形式注明作者和原始出处及本声明。
facebook:
活跃访客