Loop through PHP and target with jQuery

Question

I have this function for tooltips:

//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();
});

And I have a PHP loop with this:

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

Currently when you hover over one name, all the title tags appear on all the names. Is there an easy method to have it so if you hover over one name - Only that name has the hover event?

The code is from a free tutorial website that I can't seem to find anymore but I don't remember this particular issue being mentioned in the comment section so I'm at a loss!

I found similar code on: css-tricks.com/bubble-point-tooltips-with-css3-jquery — Ananth
– Ananth, Commented Feb 9, 2015 at 17:06

Ananth · Accepted Answer · 2015-02-09 17:32:46Z

1

The mistake in your code is in:

.appendTo(".tip")

That is appending the tooltip to all the elements with class="tip". You should only append to the current element. The code in line 8 should be:

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

answered Feb 9, 2015 at 17:32

Ananth

4,4252 gold badges23 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

potts Over a year ago

Aha! So simple! Thank you!

Collectives™ on Stack Overflow

Loop through PHP and target with jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related