CODEWITHSUNDEEP
jquerytwitter-bootstraphandlebars.jstwitter-bootstrap-tooltip
user1298426
user1298426

Reputation: 3717

twitter bootstrap tooltip not working in js template

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');

});

Upvotes: 1

Views: 1646

Answers (2)

colestrode
colestrode

Reputation: 10658

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.

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

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

Upvotes: 0

Related Questions