Bootstrap: v4.0.0-alpha.6 - Activating tooltips breaks modals (stuck "transitioning")

[METACEO]

Operating systems and browsers:

• Windows; Firefox 50.1.0, Internet Explorer 11, Tor Browser 6.0.8 (Firefox 45.6.0)
• Android 5.0.1 (Galaxy S4); Firefox 40.0.3, Chrome 45.0.2454.84, Stock Browser 2.1.34.19

Launch the demo modal with tooltips in the component's documentation, activate a tooltip, then try and exit the modal - nothing expected appears to happen. I have reproduced this outside the documentation while I have not yet tried to reproduce this outside the documentation, across all of my devices, this seems to be a show-stopping bug - freezing the user's interface and preventing any other interaction.

I'm logging two different errors in my console:

• closing the modal logs Error: Modal is transitioning
• activating a tooltip logs Error: Tooltip is transitioning.

[JD-Robbs]

Similar for me. Perhaps related: #21600

[Paladinium]

Temporary workaround is to remove the 'fade' class on modals.

[Johann-S]

It's due to those lines : https://github.com/twbs/bootstrap/blob/v4-dev/js/src/tooltip.js#L473-L476

Because we check if a tooltip is wrapped into a modal but not if the tooltip is visible or not and called hide twice instead of one call

[ghiscoding]

Nice to know that I'm not the only one seeing this problem. However in my case I have a page with multiple elements and Tooltips (no modal in play) and after doing a few mouse hovering, I start seeing the

Error: Tooltip is transitioning.

@Johann-S will your code change also fix when using Tooltip only (not in Modal)?

[Johann-S]

@ghiscoding not sure of that but if you can produce a reduce test case I can check that

[ghiscoding]

I can reproduce it on the Tooltip Doc page. It takes a few hover over to get the errors to show up in the console, I usually can see them appearing after 15-20 times of doing hover over the Toolips. I can reproduce in both Chrome and Firefox.

Created a JSFiddle account and tried forking with unminified bootstrap.js code to know which line throws the error and this is what came up (as a reminder, this is after 15-20 times of doing hover over):

Uncaught Error: Tooltip is transitioning
    at Tooltip.show (bootstrap.js:2946)
    at Tooltip._enter (bootstrap.js:3187)
    at HTMLButtonElement.<anonymous> (bootstrap.js:3134)
    at HTMLButtonElement.handle (jquery-3.1.1.min.js:3)
    at HTMLButtonElement.dispatch (jquery-3.1.1.min.js:3)
    at HTMLButtonElement.q.handle (jquery-3.1.1.min.js:3)

Try the JSFiddle, hope it works for you

[Johann-S]

It's due to this PR : https://github.com/twbs/bootstrap/pull/17823

My PR https://github.com/twbs/bootstrap/issues/21613 wont fix what you report

[ghiscoding]

Do you need me to open another issue, since it might need another PR, or do we leave it all in here?

[JD-Robbs]

@ghiscoding maybe extend on what I noted in #21600.

[2Fwebd]

Same here, Tooltips are working just fine but whenever we scroll the error shows up:

I can send you more details if you are having trouble reproducing it :)

[pvdlg]

Ref #21727

[dons20]

Had the same issue, fixed by adding data-animation="false" to my html elements.

[jaketoolson]

This is annoying... There seems to be no real fix, yet I see lots of issues opened about this and a lot of run-around.

[pvdlg]

Here is the issue aim at centralizing all the problems: #21727
Here is a PR to fix it there: #21743

[feng-xiao]

please bring back old tooltip plugin in v3

[ghiscoding]

@feng-xiao I believe that v3 is not under development anymore.

[feng-xiao]

what I meant is to bring the tooltip plugin in v3 to v4. The tooltip plugin (using tether js) in v4 is buggy, and it's missing most important feature I need - 'auto' placement. I have a tooltip that is defined in left side of screen, when the tooltip is shown the content is cut off. I'm using 'auto' placement in v3, that is automatically adjusting position

BS v4

BS v3

[adeodevs]

data-animation="false" on the elements having the data-toggle attribute solved the issue. Ref: @dons20

[niftylettuce]

What is the solution? I have the same error here - occurred when I updated from v4 alpha 4 to v4 alpha 6.

[METACEO]

Until the solution #21743 is merged, you'll have to find and use one the temporary solutions as a patch.

[kotmatpockuh]

@METACEO any news, when build#7 release was planned?

[ghiscoding]

@kotmatpockuh the next release is actually Beta (0) and since this is open source there is no planned date, it could be next month or in few months. I suggest you to follow the Bootstrap Milestones to see the progress (it currently sits at 59% complete.

[ravindrasinghinbox]

There is solution of it. make sure animation properties is false

$('body').popover({
            placement: 'bottom',
            container: 'body',
            trigger: 'hover',
            html: true,
            animation: false,
            selector: '[data-toggle="popover"]'
        });

[METACEO]

@cvkps6971h it's more of a work-around just to get by, an actual solution is being worked on.

[imbaMF]

here the some problem:

1. focusin input
2. click on label for that input

in the console you will see error

JSFIDDLE

[piuskamil]

this works for me
setTimeout(function () { $modal.modal('hide'); })

[Johann-S]

Close due to the merge of https://github.com/twbs/bootstrap/pull/21743

[d4rkd0s]

@dons20 Had the same issue, fixed by adding data-animation="false" to my html elements.

I've added this to my modal <div>'s and its not working. Still getting Modal is transitioning

[d4rkd0s]

@Paladinium Temporary workaround is to remove the 'fade' class on modals.
You must also verify that the modal div doesn't have aria-hidden="true"

Then this fix works for Modals.

[TomFoyster]

Having the same issue (Error: Tooltip is transitioning) - I'm not using Modals though,

Any update on the progress of this fix?

[Johann-S]

This fix will be available on our next release

[git-it-2020]

hi johann-s will u please provide a conservative estimate for the next twbs release? 2 weeks, 6 weeks, 12 weeks, etc? I want to set up a reminder on my calendar to add back the 'fade' class after the issue has been fixed

[Johann-S]

Sorry @git-it-2020 but the answer is when all the openned issues target by the beta release will be closed

[rawzone]

Anyone got a workaround until that huge amount of issues is closed and next alpha release is out?
(Not problem om modals, simple tooltips breaking JS execution).

[isapir]

Why is this issue closed?

I still see it happening in the Bootstrap-4-alpha-6 documentation page:
https://v4-alpha.getbootstrap.com/components/modal/#tooltips-and-popovers

[ghiscoding]

@isapir this was fixed in Beta 1 version (not the Alpha 6), however this version is still in development and not yet released.

@rawzone you should read the entire post, I believe that a few quick fixes were posted in here already

[JackZeled0n]

As

@cvkps6971h

made it, but I'm using tooltip on mdbootstrap,

$('body').tooltip({
            placement: 'right',
            container: 'body',
            trigger: 'hover',
            html: true,
            animation: false,
            selector: '[data-toggle="tooltip"]'        
});

[lianglee]

Using boostrap alpha-6

bootstrap.min.js:7 Uncaught Error: Tooltip is transitioning
    at h.hide (bootstrap.min.js:7)
    at h._leave (bootstrap.min.js:7)
    at HTMLImageElement.<anonymous> (bootstrap.min.js:7)
    at HTMLImageElement.handle (jquery-1.11.1.min.js:3)
    at HTMLImageElement.dispatch (jquery-1.11.1.min.js:3)
    at HTMLImageElement.r.handle (jquery-1.11.1.min.js:3)

[rafalp]

@lianglee this is fixed on master that wasn't released yet. This fix will hit as part of beta 1

[lianglee]

Sure, thanks

[ghost]

I'm still getting this error. Waiting for fix.

[Johann-S]

The beta 1 is out so you just have to update your release of Bootstrap @samirmammadhasanov

[ghost]

I thought i was using beta1. But actually it was alpha. It working now. Thanks @Johann-S

[Sreng-S]

I can see this error;

Uncaught Error: Modal is transitioning
    at h.hide (bootstrap.min.js:6)
    at HTMLDivElement.<anonymous> (bootstrap.min.js:6)
    at HTMLDivElement.dispatch (app.js:31839)
    at HTMLDivElement.elemData.handle (app.js:31651)

So I deleted fade class from modal elements, just now it's ok.

[dons20]

@Sreng-S it has already been fixed in beta 1.

[leotinoco]

Add data-animation="false" in addition to the data-toggle="tooltip" on everyone element