自带的title的提示效果的响应速度是非常缓慢的,使用jQuery自制提示tooltip!
HTML:
CSS:
Box-shadow: 1px 1px 2px #ccc;background:#fff;border-radius:5px;}
JQ:
SEOver(function(e){
this.myTitle=this.title;//获取title,临时存储
this.title="";//避免和原生提示重复
var tooltip="<div id='tooltip'>"+this.myTitle+"</div>";
$("body").append(tooltip);
//css()设置样式
$("#tooltip").css({
"top":(e.pageY+y)+"px",//e.pageX相对与文档,e.clientX相对于可视区
"left":(e.pageX+x)+"px",}).show("fast");
}).mou<a href="https://www.jb51.cc/tag/SEO/" title="SEO">SEO</a>ut(function(){
this.title=this.myTitle;//重复恢复
$("#tooltip").remove();//记得要把<a href="https://www.jb51.cc/tag/shengcheng/" target="_blank" class="keywords">生成</a>的结点移除掉
}).mousemove(function(e){
$("#tooltip").css({
"left":(e.pageX+x)+"px","top":(e.pageY+y)+"px",});
});
});
改进版:
将上面的tooltip内容加上图片预览!JQ:
SEOver(function(e){
this.myTitle=this.title;
this.title="";
var imgTitle=this.myTitle?"
"+this.myTitle+"":""; var tooltip="
原文链接:https://www.f2er.com/jquery/46924.html"+this.myTitle+"":""; var tooltip="
"+imgTitle+"
";
$("body").append(tooltip);
$("#tooltip").css({
"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px",}).show("fast");
}).mouSEOut(function(){
this.title=this.myTitle;
$("#tooltip").remove();
}).mousemove(function(e){
$("#tooltip").css({
"top":(e.pageY+y)+"px",})
});
});