Search code examples
jquerytwitter-bootstraptooltip

Get individual Bootstrap Tooltip


I'm using BootStrap tooltips on a few buttons that are loaded dynamically and I would like to be able to select an individual tooltip and force it to show programmatically.

I have gotten it to display the tooltips on dynamically created button using this code:

    $('body').tooltip({
        selector: '.has-tooltip'
        , trigger: 'hover'
        , title: MyFunction
    });

After that I can't find a way to grab an individual tooltip. Each button has an attribute data-tooltip="MyId" which identifies it.

I've tried these and they haven't worked for it.

$("[data-tutorial='lobby']").tooltip('show');
$('.has-popover').popover('show');
$('body').find("[data-tooltip='MyId']").tooltip('show');

Anyone know how to get around this?

Thanks in advance


Solution

  • DEMO: http://jsbin.com/bojovu/1/edit

    HTML:

    <button class="show-me btn btn-defalt btn-lg" title="This is the title">My Tip</button>
    

    jQuery:

    $(document).ready(function() {
      // show on load
    $('.show-me').tooltip({placement: 'left auto',trigger: 'click'}).tooltip('show');
    
      //destroy on click
    $('.show-me').on('click',function(){$(this).tooltip('destroy');});  
    
    });