在JQuery工具提示显示时清除标题属性

Question

我正在使用一些非常简单的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(/(\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
            }
        });
    }

Answer 1

尝试制作以下内容：

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（||）运算符将在数据中查找标题。

Answer 2

使用$(selector).removeAttr('title');来获得所需的结果。