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