Adding tooltip init to button variable

help
1

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.

2

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"}}
3

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