CODEWITHSUNDEEP
twitter-bootstrapknockout.js
Anton
Anton

Reputation: 7719

Bootstrap tooltip with knockout.js

im finding it hard to find a way to apply the bootstrap tooltip to my img once knockout has finsihed rendering a for loop.

The following shows the correct image, and the "standard" html tooltip shows up, but the bootstrap tooltip isnt activated by the .tooltip() call.

Where am i going wrong?

Viewmodel

self.handleAfterRender= function(elements, data) {
    $(elements).find('img').tooltip();
}

HTML

<div data-bind="with: $root.SelectedSubmission">
  <div data-bind="foreach: {data: To, afterRender: handleAfterRender}">
    <div class="pull-left">
      <img class="mediumprofileimage" rel="tooltip" 
           data-bind="attr: {src: ProfilePicture, alt: Fullname, title: Fullname}" />
      <br/>
      <span data-bind="text: Fullname"></span>
    </div>
  </div>
  <div class="clearfix"></div>
</div>

I found a little bit more out about the problem. it seems like the element is loosing the binding to tooltip(). I am not sure if I have to use the jquery.on() or .live() somehow to keep the binding alive.

Upvotes: 1

Views: 7059

Answers (2)

Oscar Acevedo
Oscar Acevedo

Reputation: 1212

you can find the answer here or try Knockout-bootstrap it's a good option

Upvotes: 1

Dmitry Zaets
Dmitry Zaets

Reputation: 3277

In your case you should use foreach, because afterRender got an array of the inserted DOM elements:

$(elements).each(function(index,element){ $(element).find('img').tooltip()});

But I think it is better to use afterAdd event instead of afterRender, because you need to add tooltip for each added item, and then you will be able to work with each item separately like you trying to work now:

$(element).find('img').tooltip();

Link to KnockoutJs documentation about Post-processing or animating the generated DOM elements

Upvotes: 0

Related Questions