如何以跨浏览器的方式阻止默认工具提示展示?
问题描述:
我听到它很难但可能。我只是想做它cauz我使用下面的jquery代码,以避免缓慢和非常小的默认提示showup(标题和alt属性在一个& img标签)。如何以跨浏览器的方式阻止默认工具提示展示?
$(function() {
$('a').hover(function(e) {
e.preventDefault();
if(this.title > '')
{
this.t = this.title;
// this.title = '';
$(this).append("<span id='tooltip'>"+ this.t +"</span>");
$("#tooltip")
.css("top",(e.pageY - 20) + "px")
.css("left",(e.pageX + 3) + "px")
.fadeIn("fast");
}
},
function() {
$(this).find("span:last").remove();
}
);
});
现在,如果我释放//this.title ='';在代码中 - 它工作,但工具提示只运行一次,在下一次悬停时没有重播。
任何想法如何覆盖?谢谢。
答
我喜欢qTip但如果你想推出自己的代码,我会做到这一点...
$(function(){
// remove all titles and create tooltip span
$('a[title]').each(function(){
var s = $("<span class='tooltip'>"+ this.title +"</span>").hide();
$(this).append(s).removeAttr("title");
});
// setup hover functions
// tooltip spans are already present
// we just need to position and show them or hide them
$('a').hover(function(e){
$(this).find("span.tooltip").css({
top: (e.pageY - 20) + "px",
left: (e.pageX + 3) + "px"
}).fadeIn("fast");
},
function(){
$(this).find("span.tooltip").fadeOut("fast");
});
});
答
忽略我最后的答案,我刚完成了一个Moosehead。
$('a').hover(function(e) {
e.preventDefault();
var title = $(this).attr('title');
// assign the original title to the "tt" attribute
$(this).attr('tt', title);
$(this).removeAttr('title');
$(this).append("<span id='tooltip'>" + title + "</span>");
$("#tooltip").css("top", (e.pageY - 20) + "px").css("left", (e.pageX + 3) + "px").fadeIn("fast");
}, function() {
// assign it back to what it was
$(this).attr('title', $(this).attr('tt'));
$(this).find("span:last").remove();
}
};
你就不能设置标题在读取其值后清空?例如(未经测试)这可能工作? 'this.t = this.data('title')= this.attr(“title”)|| this.attr( “标题”); this.attr(“title”,“”);'..嗯,你需要修正或稍微修改title属性,然后删除它。 – frumbert 2012-03-22 02:13:49
是的,但第二个想法..我认为这可能会工作(与this.title ='';)!如果你只显示一次tooltip,用户我最后会问自己这个提示实际上说了些什么lol:D ps:如果它没有被删除 - 就像我测试的那样 - tooltip一直显示为副本(这里和那里,并不总是,但有时)。但是我检查出来! – Xfile 2012-03-22 02:23:06
@Joseph我重新考虑了我的答案...... IMO好得多。 – Kyle 2012-03-22 03:01:51