I am pushing a button to the web page and would like to add it generated tooltip.
How can I start $(‘button[rel=tooltip]’).tooltip(); after the variable holding the generated button is changed?
I’m currently using setInterval, but it’s a bit hacky solution, so I’m searching for a more Meteor way.
I did something similar recently, but placing tooltips on glyphicons. I basically wrapped everything in a reusable template and used the onRendered callback.
Your use case will be a little different, but I’ve pasted my code below in case it helps demonstrate what I mean.
helpIcon.html
<template name="helpIcon">
<span
class="
glyphicon
glyphicon-{{icon}}
{{class}}
"
data-toggle="tooltip"
data-placement="{{placement}}"
title="{{title}}"
>
</span>
</template>
helpIcon.js
Template.helpIcon.onRendered(function() {
this.$(this.findAll('[data-toggle="tooltip"]')).tooltip();
});
Template.helpIcon.helpers({
placement() {
return this.placement ? this.placement : 'top';
},
icon() {
return this.icon ? this.icon : 'question-sign';
}
});
Example use from another template
{{>helpIcon
title="Tooltip you want to display goes here"
icon="share-alt"}}
Love it. Looks cool. I was playing with onRendered, but the page was not rendered when adding button (well, changing the value of variable).
1 Like