遍历PHP并使用jQuery定位

Question

我为工具提示提供此功能：

//Tooltips
(function($) {
    $.fn.tooltips = function(html) {
        var $tooltip,
            $html;
        return this.each(function(data, html) {
            $html = $(html).attr("data-tooltip", data);
            var $tooltip = $('<div class="tooltip" data-tooltip="' + data + '">' + $html.attr('title') + '</div>').appendTo(".tip");
            $html.removeAttr("title").hover(function() {
                $html = $(this);
                $tooltip = $('div[data-tooltip=' + $html.data('tooltip') + ']');
                $tooltip.addClass("active");
            }, function() {
                $html = $(this);
                $tooltip = $('div[data-tooltip=' + $html.data('tooltip') + ']');
                setTimeout(function() {
                    $tooltip.removeClass("active");
                }, 100);
            });
        });
    }
})(jQuery);

$(function() {
    $("a.tip[title]").tooltips();
});

我有一个PHP循环：

echo '<span class="author-meta"><a class="author tip" id="'. $username .'" href="#" title="[Removed]">'. $username .'</a></span><br>';

当前，当您将鼠标悬停在一个名称上时，所有标题标签都会显示在所有名称上。 有没有一种简单的方法可以将其悬停在一个名称上-只有该名称具有悬停事件吗？

该代码来自一个免费的教程网站，我似乎找不到了，但是我不记得注释部分提到的特定问题，所以我很茫然！

Answer 1

您的代码中的错误在于：

.appendTo(".tip")

那就是将工具提示附加到class =“ tip”的所有元素上。 您应该只附加到当前元素。 第8行中的代码应为：

var $tooltip = $('<div class="tooltip" data-tooltip="' + data + '">' + $html.attr('title') + '</div>').appendTo(this);