在JQuery工具提示显示时清除标题属性
我正在使用一些非常简单的JQuery来使用存储在元素的title属性中的文本创建一个悬停的工具提示。 它工作正常，但我需要停止浏览器的默认title行为发生在同一时间（或稍微延迟悬停后）。
我认为JQuery的.on()功能可能不是最好的方法，但我试图使用最新的功能（我知道！）。
目前，如果我清除现有的title值，则实际的工具提示显示但是为空。 我认为这是因为代码在鼠标移到元素上时连续运行。
任何人都可以提供一种方法来停止浏览器的title文本出现，但恢复title的原始值onmouseout？ 我需要使用与XHTML1.1兼容的JQuery 1.10.1+。
谢谢。
$(document).ready(function () {
$('<div/>', { id: 'ttfloat', 'class': 'tooltip' }).appendTo('body');
BuildTipsV3();
});
function pageLoad() { // fired by ASP.NET after partial postback
BuildTipsV3();
}
//var temptt;
function BuildTipsV3() {
$("[title]").on({
mouseenter: function () {
var o = $(this).offset();
var y = o.top + 18;
var x = o.left;
temptt = $(this).attr("title"); // temp storage
$(this).data('title', temptt);
//$(this).attr('title', '');
var tooltip = temptt;
tooltip = tooltip.replace(/(rn|n|r)/gm, "<br/>");
$("#ttfloat").css({top:y, left:x})
.html(tooltip)
.show();
},
mouseleave: function () {
$("#ttfloat").hide();
$(this).attr('title', $(this).data('title')); // reset for accessibility
}
});
}
尝试制作这些行：
temptt = $(this).attr("title"); // temp storage
$(this).data('title', temptt);
//$(this).attr('title', '');
var tooltip = temptt;
改为：
var $this = $(this),
tooltip = $this.attr('title') || $this.data('title');
$this
.attr('title', '')
.data('title', tooltip);
上面的代码所做的是，如果title属性为空，则or（ || ）运算符将在数据中查找标题。
使用$(selector).removeAttr('title'); 达到您想要的效果。