bootstrap: function _isWithActiveTrigger in tooltip.js is causing an uncaught error

That might be a wrong usage of the class but it is useful to reproduce the error consistently.

In my case I’m using the dispose() method (as the documentation states here) to hide the tooltip and remove the instance from an item, but this is sometimes generating the error.

Here’s my code:

I’m guessing that when the dispose() method is called, another call to hide() gets executed at the same time maybe by the mouseleave event.

I think a failsafe in the dispose() method is required to prevent these edge cases.

I ran into this error and because of the comments in this issue I was able to resolve it.

In my scenario I wanted to change the title/position after the tooltip was initialised. I did this by disposing the tooltip and immediately re-initialising the tooltip with the latest values. This works, however when the tooltip was shown and the title/position updated, it resulted in this error.

I found that you can use lambdas instead to always get the latest values, like so:

 new Tooltip(this.element, {
  "title": () => this.title,
  "placement": () => this.placement
});

Now I only dispose the tooltip when the element gets destroyed.

Update 7 September 2023: Still getting the issue. The reproduction is actually straightforward: call dispose when the tooltip is visible, then the error will be thrown; unless you dispose after the hidden event triggered.

Update: In my case the error occurs frequently when an input already has a popover with an error message, by script a new error message comes in. The existing popover must be disposed before the new message can be shown. If the mouseover/mouseleave is triggered during that disposing and adding the new popover the error occurs. Even if I set a timeout of 2 sec. between disposing and adding

1: start disposing

2: doing mouseover and mouseleave over the input with a popover

error occurs: tooltip.js:536 Uncaught TypeError: Cannot convert undefined or null to object at Function.values (<anonymous>) at Popover._isWithActiveTrigger (tooltip.js:536:19) at complete (tooltip.js:268:16) at execute (index.js:254:5) at HTMLDivElement.handler (index.js:276:5) at triggerTransitionEnd (index.js:98:11) at index.js:282:7 _isWithActiveTrigger @ tooltip.js:536 complete @ tooltip.js:268 execute @ index.js:254 handler @ index.js:276 triggerTransitionEnd @ index.js:98 (anonymous) @ index.js:282 setTimeout (async) executeAfterTransition @ index.js:280 _queueCallback @ base-component.js:49 show @ tooltip.js:238 (anonymous) @ tooltip.js:511 setTimeout (async) _setTimeout @ tooltip.js:532 _enter @ tooltip.js:509 (anonymous) @ tooltip.js:465 handler @ event-handler.js:98

(2 sec. passed) 3: add new popover

I hope this helps in finding a solution for this nasty error.

Running into this as well…

simple live demo: https://codepen.io/alchimik-irk/pen/abapgLZ

I’m experiencing the very same issue when using Bootstrap with Blazor and trying to navigate to another route (removes the elements from DOM) when the tooltip is still displayed:

The Blazor code is as simple as follows:

@inject NavigationManager NavigationManager

<HxButton Text="Navigate home"
	Tooltip="Navigate"
	Color="ThemeColor.Primary"
	OnClick="@(() => NavigationManager.NavigateTo(""))" />

HxButton is a component from a Blazor library wrapping Bootstrap: https://havit.blazor.eu/

For now, I’m not trying to give you a regular repro, just adding some additional info to the issue.

BTW: My original intention was to reproduce this issue (https://github.com/havit/Havit.Blazor/issues/457): …but when I recreated the original scenario, the _activeTrigger error appeared instead.

Hi @julien-deramond any progress on this issue?

best regards

Hi @julien-deramond, see my previous comment for reduced test/live demo.