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.
Written by Wojtek Ryrych
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Ember.js
Authors
ryrych
11.71K
michalbryxi
6.718K
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#