在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'); 達到理想的效果。