Bug in tool tips

I have a page which sets facilities available in a building.
I have implemented this by means to two containers containing icons (font awesome icons).
One container has icons for facilities which have been added, the second those remaining available to add. each icon is wrapped in a form with some extra detail in hidden fields and a tooltip is added to show text describing the facility
Linked to the icons is a click action which performs a submit of the form which removes or adds the relevant facilties to/from a list.
This works well, clicking the icons does add and remove the icons as desired and the screen updated by reloading the connection.
HOWEVER if i linger with the cursor over the icon as i click the icons, the submit occurs, the icon disappears BUT the tooltip remains and the only way to remove it is to refresh the page.

I guess i may be using the tooltip a way it was not intended but a solution would be wonderful!

Video: tool-tip-issue.mp4 (662.9 KB)

Link to demo page: Click here

Yes i have the same issue but i guess thats from bootstrap.

That’s how bootstrap 4 tooltips work. Maybe @patrick can check this and add some dynamic event for triggering tooltips.

delete the tool tip if the element was deleted

Tooltip needs to be hidden/destroyed when its parent element is removed.

1 Like

@Hyperbytes maybe you can try adding a static event on click to the element having the tooltip:

Thanks @Teodor, that solved the issue perfectly

1 Like