Create tooltips in Meteor
I am using Bootstrap tooltips which require some initialization. Someone told me to do it like this:
Template.myTemplate.rendered = function() {
$('.tooltipped').tooltip()
}
Then I can add tooltips by adding a class tooltipped
and some data
-tags, here on the Font Awesome icon:
<i class="tooltipped fa fa-square" data-toggle="tooltip" data-placement="top" title="Whatever the tooltip should say"></i>
The problem is that these icons appear on the items as they are dynamically added and something keeps tooltips from working on new items. It requires a full page reload to get them working.
Including the problem I found two suggested solutions, neither of which works.
The first solution was to wrap the initialization code inside a function Meteor.defer()
, something that I have no experience with and doesn't even show up in the official docs.
Template.myTemplate.rendered = function() {
Meteor.defer(function() {
$('.tooltipped').tooltip()
})
}
This, however, doesn't seem to do anything.
The second solution was not really a solution, just a recommendation to overturn Bootstrap's tooltips and set feedback: tooltips, but it was not a very pleasant experience (hard and not working).
So I was left with Bootstrap and not reactivity. Does anyone know how to get it to work as expected?
source to share
So it won't work ...
<template name="myTemplate">
{{#each myTemplateItems}}
<i class="tooltipped fa fa-square" data-toggle="tooltip" data-placement="top" title="{{whateverTheTooltipShoudSay}}"></i>
{{/each}}
</template>
Template.myTemplate.onRendered(function() {
$('.tooltipped').tooltip()
})
The callback onRendered
does not fire when an item is added to myTemplateItems
. This is due to what is myTemplate
already displayed.
But this should work:
<template name="myTemplate">
{{#each myTemplateItems}}
{{>myTemplateItem}}
{{/each}}
</template>
<template name="myTemplateItem">
<i class="tooltipped fa fa-square" data-toggle="tooltip" data-placement="top" title="{{whateverTheTooltipShoudSay}}"></i>
</template>
Template.myTemplateItem.onRendered(function() {
this.$('.tooltipped').tooltip();
})
When a new element is added to myTemplateItems
, a new instance of the template is created myTemplateItem
, which you can call onRendered
on.
source to share
You can just use the helper on the attribute title
. For example, if you are using the default meteth app created in meteor create
, you can simply write:
<i class="tooltipped fa fa-square" data-toggle="tooltip" data-placement="top"
title="{{counter}}"> the text with the tooltip </i>
And you will see how the tooltip changes when the spin button is pressed. This uses a variable Session
, which is a great example of a reactive data source. But other reactive data sources should work the same way, such as a query on a collection.
Caveat: I don't know what will happen if the user hovers over the element using the tooltip, i.e. in this case, the tooltip may not update until the user releases the mouse and comes back again.
source to share
Another solution I am using is when changes (changes) in your templates are triggered by buttons / events, you can programmatically destroy and reinitialize your tooltips in your event handlers. This works really well if you have different versions of the same button with different tooltips / disabled settings based on some conditions in your data.
Your template:
{{#unless exceededCapacity}}
<a href="" id="addItemButton" class="add-item" data-toggle="tooltip" data-placement="top" title="" data-original-title="Click here to add items.">Add Item</a>
{{else}}
<a href="" id="addItemButton" class="add-item" data-toggle="tooltip" data-placement="top" title="" data-original-title="You cannot add any more items." disabled>Add Item</a>
{{/unless}}
Then enter the event code:
'click .add-item': function(event) {
event.preventDefault();
// Destroy the tooltips
$('.add-item').tooltip('destroy');
// Code to do your work... e.g insert time
// Reinitialize tooltips - this could also be called in an insert callback upon success, etc.
$('.add-item').tooltip({trigger: 'hover'});
}
source to share