twitter bootstrap tooltip not working in js template

Question

I ma using twitter bootstrap tooltip functionality which works fine in gsp header texts. Now I want to add bootstrap tooltip on id="tooltipcheck". If I write title="{{data}}" then I could see the tooltip but bootstrap tooltip does not seem to work here. Is there any issue with js template or there is something else?

<script id="myTemplate" type="text/x-handlebars-template">
<div class="row">
    <div class="span4" id="tooltipcheck" data-placement="bottom" data-toggle="tooltip"  data-original-title="{{data}}">{{data}} </div>
</div>

I am calling tooltip like this.

      <script>

jQuery(function ($) {
    $("#tooltipcheck").tooltip('show');

});

Answer 1

You can't set the ID of an element in a template because ID's need to be unique. Try changing tooltipcheck to a class instead:

<div class="span4 tooltipcheck" data-placement="bottom" data-toggle="tooltip" data-original-title="{{data}}">{{data}} </div>

And then initialize your tooltips using the class:

$(".tooltipcheck").tooltip('show');

The tooltips will need to be initialized after handlebars has parsed the template and generated your markup, or else the tooltips won't have any elements to bind to.

Answer 2

since you are working with dynamic elements, after the elements are added to the dom you need to initialize the tooltip for the new elements

Ex:

var html = // html from template
var el = $(html).appendTo('somele');
el.find('<tooltip-element>').tooltip('show');

Also since you are using a template I'm assuming there will be multiple instances of the template in the page, so do not use id inside the template since in dom an id should be present only once