Tippyjs: HTML Tooltip doesn't hide when tracked target is changed

[dpatra]

Hi @atomiks ,

I have a scenario where the tooltip html doesn't hide with followCursor: true.

The tooltip is rendered as dynamic html as mentioned in https://github.com/atomiks/tippyjs/issues/213

In my scenario, the target needed update and the tooltip should be updated accordingly. Which worked fine, the tooltip was following cursor; but it was not going away if the hover target is not the element.

[atomiks]

Please create CodePen to reproduce the issue. Use the template in the issue.

[dpatra]

Hi @atomiks ,

I am not able to replicate the issue in the codepen I created: https://codepen.io/dpatra/pen/mxoXmX

But, here is the scenario how it doesn't work for me.

My project is a ExtJs application, where the left pane is a list of items in a dataview; when the dataview item is updated, it removes the tippy attibutes; so I re-apply tippy after the item is updated. There, I face the issue, the html tooltip is not detaching it from the target.

Is there a way, I can find the html tooltip and remove it and apply a newer html tooltip.

I hope I am explaining you correctly.

[atomiks]

Before the items are updated, you should destroy the tippy instance

If you don't have a reference to it in JS you can use the DOM:

const popper = document.querySelector('.tippy-popper')
if (popper) {
  popper._tippy.destroy()
}

[dpatra]

Wow, it worked. Thanks a ton.