Last Updated: February 25, 2016
·
2.442K
· ryrych

Bootstrap Tooltip - how to deal with asynchrony

Let's say that title should be dynamic. Our first take may be as the following (I think that this could be now a Ember Component but I can't figure out the difference):

App.TooltipView = Ember.View.extend
    template: Ember.Handlebars.compile '<span class="glyphicon glyphicon-question-sign"   </span>'
    tagName: 'a'
    classNames: ['tooltip']
    attributeBindings: ['href', 'data-toggle', 'title']
    href: '#'
    'data-toggle': 'tooltip'
    didInsertElement: ->
        @$().tooltip()

The problem is that the data can still be inaccessible when the View is inserted into the DOM. As Tooltip makes use of data-original-title attribute internally to display the content of the tooltip, the solution is a walk in the park:

App.TooltipView = Ember.View.extend
    template: Ember.Handlebars.compile '<span class="glyphicon glyphicon-question-sign"   </span>'
    tagName: 'a'
    classNames: ['tooltip']
    attributeBindings: ['href', 'data-toggle', 'data-original-title']
    href: '#'
    'data-toggle': 'tooltip'
    didInsertElement: ->
        @$().tooltip()

As you can see we can even do without title:

{{view App.TooltipView data-original-titleBinding="popover"}}

Now when the data is ready, content can be displayed normally.