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

Question

我使用了一些非常简单的jQuery创建使用存储在元素的文字悬停工具提示title属性。 它工作正常，但我需要停止浏览器的默认title行为同时发生（或在悬停稍有延迟后）。

我认为JQuery的.on()功能可能不是最好的方法，虽然我正在尝试使用最新的功能（我知道！）。

目前，如果我清除现有title值，则显示实际工具提示但为空。 我认为这是因为代码在鼠标悬停在元素上时连续运行。

任何人都可以提供一种方法来阻止浏览器的title文本出现，但恢复title onmouseout的原始值？ 我需要代码与JQuery 1.10.1+兼容，兼容XHTML1.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'); 达到理想的效果。