Unable to use the same HTML template for multiple tooltips

Hello,

I have an issue, where I’m unable to use the same HTML template for multiple tooltips.

Here’s my init code:

var poppers = Array.from(document.querySelectorAll('[data-toggle="popper"]'));
tippy(poppers, {
	position: 'bottom',
	trigger: 'click',
	duration: 100,
	interactive: true,
	arrow: true,
	performance: true,
	html: document.querySelector('.popper')
});

Only the last [data-toggle="popper"] is able to toggle the tooltip, the first ones just display an empty box.

Any ideas how to fix this? 😃 Popper.js and tippy.js are looking very awesome!

[atomiks]

Alright, I’ve simplified the hell out of the Creating HTML Templates section. That was really wordy and hard to read before. Now I’ve simplified it and explicitly noted the two options.

https://atomiks.github.io/tippyjs/#creating-html-templates

[padi]

I kind of stumbled upon this and debugged this the hard way just a few weeks ago (new to using tippy.js by maybe about a month now). I was going to suggest a fix for it but there’s a workaround: use Node.cloneNode(true).

It’s not written in the docs, but the template you’re referring to (‘.popper’) is being taken away from the DOM. Check it out in your project.

@atomiks the long term fix is to either handle the cloning of the node internally or update the docs to describe this behavior.

Hope this helps @raineluntta.