Search code examples
javascriptjquerytwitter-bootstraptooltiptipsy

Twitter Bootstrap - tooltip with a dynamically changing insert

Maybe I'm trying to max out the tooltip feature too much, but I like the style of the tooltip and would prefer to not add another JS library.

The Fiddle should be pretty self explanatory, but I trying to have it so the insert element can change with JS while the tooltip is showing.

Solution

  • This is a delegation issue. the Twitter bootstrap Toolip uses a dynamic element to come into the DOM, and leave the DOM. This means that this element is not available at the time of DOM ready.

    This is where jQuery's event delegation shines.

    $(document).on('click', '.insert', function() {
    $(this).css('height', '200px');
});

    The idea is to attach the click handler to a static parent element. This way, we can ensure that the methods are invoked on all current and future elements in the scope of our selector, which in this case is '.insert'