jQuery Tools and Ajax

Posted: 12/01/13

Fun and games using jQuerytools tooltip on AJAX loaded content

I've been using the tooltip jQuery plugin from jQuerytools for a while now, and it's generally awesome. However I was having some fun and games getting the tooltip to play nice on content loaded via AJAX.

As anyone who's ever tried to attach an event to a DOM element inserted via AJAX will know, you need to use live(), delegate() on in the 1.7.1 version of jQuery that ships with Concrete5.6, on().

My first attempt was to attach the mouseover event to the new element, and use this to call the tooltip function. This kind of worked, in as much as the tooltip did appear, but only on the second mouseover, which rather defeated the whole point.

I figured that because the tooltip listens for the mouseover event, the thing to do was to trigger another mouseover. However, this induced a number of javascript errors. Also, repeatedly calling tooltip for each mouseover wasn't very clever.

In essence what needs to happen is:

1. catch the mouseover event
2. if this is the first event ever, call tooltip and trigger another mouseover event, else do nothing.

There are various ways to determine whether the mouseover event was the first one, but I went with the data() method. The final code looked like this:

 $(document).ready(function(){
        $(document).on('mouseover','.myclass',function(){
            if (!$(this).data('init')) {
                $(this).data('init', true);
		$(this).tooltip().trigger('mouseover');
	    }
        });
    });