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

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

Temporary workaround is to remove the ‘fade’ class on modals.

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

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"]'
        });

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

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

@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

This fix will be available on our next release

@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.

please bring back old tooltip plugin in v3

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

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

@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.

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

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.

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)?

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

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"]'        
});

@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

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

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