jqueryajaxwordpresscalendartiptip

tipTip works on 'second' hover after ajax request using tiptip and jquery on()

I'm using wordpress + ajax calendar future post plugin ( http://wordpress.org/extend/plugins/wordpress-plugin-ajax-calendar-with-future-posts/ ) + tiptip plugins http://code.drewwilson.com/entry/tiptip-jquery-plugin. I've managed to get them working together, though the tiptip only works on the 2nd hover - What I mean is when you first time hover element after ajax request tiptip doesn't show. I use the calendar as a widget on my home page.

This is the way I activate tiptip. 

jQuery(document).ready(function( $ ) {

    $("#wp-calendar").on("hover"," td a", function(){ $(this).tipTip(); });
...
});

it works fine for the initial load if I use

$("#wp-calendar td a").tipTip();

, but it disappears after ajax request.

The question is how do I get the tiptip to show the way it supposed to show: on the 'first hover', mouseenter, mouseover etc. I've tried all of those events. AKA: How do I get the first piece of code to work properly.

I've tried to find an answer, which got me to the stage I'm now. It's beyond my 'now-skill' to get pass this.

Solution

  • Well i think that if you make an AJAX call you and recreate the elemenets you must re-initialize the plugin. I think you should put this call 

     $("#wp-calendar td a").tipTip();

    in the success handler of the ajax call AFTER the new elements have been inserted. If you can't control the ajax call try using ajaxComplete()

    $('body').ajaxComplete(function(e, xhr, settings){
     $("#wp-calendar td a").tipTip();
});

    If you do this, i think you can take away this call:

    $("#wp-calendar").on("hover"," td a", function(){ $(this).tipTip(); });

    because you already have reapplied the plugin.