tipTip on contents loaded via ajax

Elias's Avatar

Elias

22 Mar, 2010 08:19 AM

Hi,

I'm using tipTip and its absolutely great!

But if i use it on content i've loaded with jQuery's .ajax() function, tipTip isn't working.
I think because of the .hover() function.
My Problem is that im not as familiar with javascript, that i can get it work with jQuery's .live() function :(

I hope anybody can help me with this Problem :)

Thanks

Elias

  1. Support Staff 1 Posted by Drew Wilson on 24 Mar, 2010 03:07 PM

    Drew Wilson's Avatar

    You will need to unbind the hover() method from the element that has tiptip applied to it. THen re-call the tiptip function on that element with the new test you got back from the ajax() call.
    I will work on making the tiptip text changeable on the fly for the next release.
    Thanks!
    Drew

  2. 2 Posted by Mario Izquierdo on 12 Apr, 2010 09:54 AM

    Mario Izquierdo's Avatar

    When do something like
    $("*[title]").tipTip(); the tipTips should be working after ajax requests, or after append new content.

    Example:
    $('body').append('

    New DOM Element
    '); // The new element has a title, then fits in the "*[title]" selector, but it has no a tipTip.

    The tipTip should works like the ".live()" method of jQuery by default (an option like live by default would be fine).

    ¿Can be this released in future versions?

    By now, the best general solution i found is to do something like this:
    $(function() {

    // Wrap the tipTips generation inside a function
    // This function works even in ajax loaded contents
    // (not works in appended new content)
    var tipTip = function(selector, options) {
       var elements = $(selector);
        elements.tipTip(options)    // apply tipTips as usual
          .ajaxComplete(function() {
              elements.tipTip(options);   // and apply again after ajax requests
          });
        return elements;
    }
    
    // Now use that function instead
    tipTip("a[title]");
    

    });

  3. 3 Posted by Mario Izquierdo on 16 Apr, 2010 11:13 AM

    Mario Izquierdo's Avatar

    Sorry, bad sintax the previous post. Rewrite:

    When do something like
    $("*[title]").tipTip();, the tipTips should be working after ajax requests, or after append new content, and currently is not.

    Example:
    $('body').append('<div title="I want to be a tooltip">New DOM Element</div>'); The new element has a title, then fits in the "*[title]" selector, but the tipTip doesn't works in there.

    The tipTip should works like the ´.live()´ method of jQuery by default.

    ¿Can be this released in future versions?

    By now, the best general solution i found is to do something like this:

    $(function() {
      // Wrap the tipTips generation inside a function
      // This function works even in ajax loaded contents
      // (not works in appended new content)
      var tipTip = function(selector, options) {
          var elements = jQuery(selector);
          elements.tipTip(options);    // apply tipTips as usual
          $('body').ajaxComplete(function() {
              elements = jQuery(selector); // reselect elements
              elements.tipTip(options);   // and apply again after ajax requests
          });
          return elements;
      }
    
      // Now use that function instead
      tipTip("a[title]");
    });
    

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac