我正在使用一些非常简单的 JQuery 来使用存储在元素title
属性中的文本创建悬停工具提示。它工作正常,但我需要停止浏览器的默认title
行为同时发生(或在悬停时稍有延迟)。
我认为 JQuery 的.on()
功能可能不是最好的方法,尽管我正在尝试使用最新的功能(我知道!)。
目前,如果我清除现有title
值,则会出现实际的工具提示但为空。我认为这是因为当鼠标悬停在元素上时代码会连续运行。
谁能提供一种方法来阻止浏览器的文本出现,但恢复onmouseouttitle
的原始值?title
我需要代码与具有 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(/(\r\n|\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
}
});
}