v5: Bootstrap tooltips don't appear after numbers of focusing

[sajadafaghiy]

• Operating System: Windows 10
• Browser: Chrome version 87.0.4280.88

Titled problem occurs even on official docs of bootstrap website at here. Tooltips all after some hovering are disappeared and not be accessible any more.

[XhmikosR]

Sorry, we need more info. Please make a CodePen as per our issue template.

[septatrix]

I can reproduce the issue on the example linked to in the documentation. Quickly hovering over the button seems to cause this issue... To be more precise it seems as if refocusing/-hovering while the popover still transitions out leads to the behaviour.

[XhmikosR]

OK, thanks for the info. I can reproduce indeed.

I believe it's a regression from the Popper 2.x update. Testing the PR preview before the Popper update seems to be fine https://deploy-preview-32280--twbs-bootstrap.netlify.app/docs/5.0/components/tooltips/#examples

[XhmikosR]

I think I pinpointed the issue. It lies in these lines:

bootstrap/js/src/tooltip.js

Lines 608 to 611 in b1290ff

	if (context.getTipElement().classList.contains(CLASS_NAME_SHOW) || context._hoverState === HOVER_STATE_SHOW) {
	context._hoverState = HOVER_STATE_SHOW
	return
	}

After hovering a few times over the same tooltip, it seems that context.getTipElement().classList.contains(CLASS_NAME_SHOW) becomes true, thus we enter that block and return.

Now, I don't know if that block is even needed anymore, or if we shouldn't return from there.

EDIT: I think the return there is present so that we don't show the tooltip if leave happens before the delay has passed.

[Jas-n]

The buttons in the example work for me. However, it seems that the SVG example doesn't, neither does it on my project with child elements:

<a class="js-toggle-help" data-bs-placement="bottom" data-bs-toggle="tooltip" title="" data-bs-original-title="Help">
    <span class="visually-hidden">Help</span>
    <i class="fa-fw fad fa-life-ring"></i>
</a>

I've done a bit more testing and it seems like if you stay on the element with the tooltip(s) assigned it works, but if you then hover over the child element the tooltip breaks for that (parent) element and doesn't reappear.

[XhmikosR]

It seems the issue is caused by the popper 2.x update.

I still don't get why the above happens #32372 (comment)

[pwagsc]

Issue is that BS5 is starting to process a tooltip “leave” before the fade delay expires on the previous 'enter/show' (thus the ‘complete’ function has not been executed yet). So BS starts processing the 'leave' and the show complete occurs immediately after the leave executes its leave transition. (alternatively a show may kick off before a leave executes its complete) Depending on timing this sometimes causes the tooltip object to be deleted but the tooltip element remains in the show state. So the 'enter' and 'leave' will not execute (enter because the element says its showing and leave because the tooltip object has been destroyed). WORKAROUND: Simply add data-bs-animation='false' and everything works fine. I will leave it to you to add appropriate code to flag a previous show or hide is pending and process the new request appropriately (kill the animation event and execute the complete before processing new event or queue the events??). BTW - this is also why it fails more often where elements are nested because rapid transitions in and out of hover occur in constrained areas.

[Swiftless]

Can confirm the above workaround from @pwagsc, I had quick hovers of the trigger element causing the tooltip to stay visible (instead of disappearing) but it appears to be related if not another result of the same issue defined in the ticket.

[GeoSot]

Two possible solutions, both exclude many fallback tooltip placements on popper .
If the option is omitted, it enables to flip only in the opposite side. (which is not so bad)

Two branches to test it:
a) https://github.com/GeoSot/bootstrap/tree/fix-tooltip-2

• minimum changes that works

b) https://github.com/GeoSot/bootstrap/tree/fix-tooltip

• more changes, removing too many extra actions that are not needed.
• one problem, the side arrows on first load are not centered, which can be solved with css in if I am not wrong, by popper in the near future

I avoided to open PR not to mess things. If you want me to open a PR, please tell me.

[septatrix]

It seems like it should be possible to internally track whether or not a transition is currently in progress and if e.g. 'show' finishes while 'leave' is already fired it should not modify classes etc.

[ffoodd]

@joeforjoomla We know, that's why the issue is still opened.

[RyanBerliner]

I may be wildly over simplifying this but an extra check before completing the hide transition seems to work for me RyanBerliner@c2ece10

[XhmikosR]

@RyanBerliner can you please add a test case and if it passes submit a PR?

[NicolasThierion]

I have the same issue with Bootstrap 5.0.0-beta2. As a simple workaround, I added a 100ms delay which seems to mitigate the issue, until this bug is fixed.

[RentecTravis]

I think this and #32897 may have the same root cause.

[dajohnsonco]

Issue is that BS5 is starting to process a tooltip “leave” before the fade delay expires on the previous 'enter/show' (thus the ‘complete’ function has not been executed yet). So BS starts processing the 'leave' and the show complete occurs immediately after the leave executes its leave transition. (alternatively a show may kick off before a leave executes its complete) Depending on timing this sometimes causes the tooltip object to be deleted but the tooltip element remains in the show state. So the 'enter' and 'leave' will not execute (enter because the element says its showing and leave because the tooltip object has been destroyed). WORKAROUND: Simply add data-bs-animation='false' and everything works fine. I will leave it to you to add appropriate code to flag a previous show or hide is pending and process the new request appropriately (kill the animation event and execute the complete before processing new event or queue the events??). BTW - this is also why it fails more often where elements are nested because rapid transitions in and out of hover occur in constrained areas.

THANK YOU!!!!!!!!! adding data-bs-animation='false' works like a charm.