Tippyjs: Update tooltip content

[aboumekh]

Hi,
I am using Tippy.js v2.5.2.
In my web page the tooltip content get dynamically created by the user with Javascript. the problem is that each time the user updates the same tooltip content, I have a new tooltip bubble displays upon the old one, and I end up with multiple tooltips display upon each other, rather than display just the latest.
Do you have any idea on how to display only the latest updated content ?

[atomiks]

V3+

Use the .setContent() method

V2

tippy(ref, { dynamicTitle: true })
ref.title = "new tooltip"

[aboumekh]

I am using html rather than title:
tippy(ref, {
html: '#Template'
})
Is there a solution for this please ?

[atomiks]

Save the template to a reference to modify it later

const template = document.querySelector("#Template")
tippy(ref, {
html: template
})
template.innerHTML = "new tooltip"

[aboumekh]

I am sorry, but that's exactly what I am doing. You can probably try a test on your side and reproduce this issue.
Thanks

[aboumekh]

It looks like tippy cumulate the content, and not just update it

[atomiks]

https://codepen.io/anon/pen/aKWeOm

Here the template content is updated every 250ms. You must be doing multiple tippy() calls to cause the duplicate tooltips.

[aboumekh]

All right, thank you :)

[aboumekh]

Here is my code snipet, it looks like the popper.innerText does not get updated when I update the comment content:
myTemplate.innerHTML =comment;
id = '#'+ myTemplate.id;
if(item.firstTip === 0){
item.firstTip = 1;
tippy(ref, {
html: id,
});
}
I use firstTip to not call tippy() a second time.
Do you have any idea ?
Thanks

[itsalb3rt]

@atomiks My humble opinion is that I will put this example in the documentation, this example is super easy to understand.

https://github.com/atomiks/tippyjs/issues/247#issuecomment-396778756

[atomiks]

@itsalb3rt current docs show this:

Is that not easy to understand?

In V3, it's:

tippy(ref, { content: 'Hello' })
ref._tippy.setContent('Bye')