Bootstrap: Tooltip flickers while inside .table-responsive

[simPod]

When using Tooltips inside .table-responsive, they flicker as can be seen on this codepen example.

It can be fixed by placing overflow: visible on .table-reponsive but that breaks table's responsivity.

[simPod]

I solved it by changing { boundary: 'window' } but shouldn't the default value then be reconsidered?

[alecpl]

The default value change is also a solution for #25428.

[Johann-S]

You found the solution and it's not a bug so I'll close this issue too

[simPod]

But it is a bug when used with table responsive.

The thing that I was able to solve it doesn't mean it is not a bug.

The bug is something that behaves not according to the specification. And the specification states that tooltip is created and steadily visible when the underlying object is hovered. But in this case tooltip flickers. So it is a bug.

[Johann-S]

Yep but under the hood if you use our Tooltips/Popovers or Dropdown, you use Popper.js, so you have to dig in Popper.js documentation and find a solution to your problem, which isn't the common use case.

At least we can add a callout in the .table-responsive to help folks

[FezVrasta]

There's an open issue on Popper.js to make the default value even smarter, that should also fix this annoyance, but there's not any ETA unfortunately.

This is the issue:
https://github.com/FezVrasta/popper.js/issues/611

the code changes aren't that difficult actually if anyone wants to give it a try.

[warmwhisky]

I solved it by changing { boundary: 'window' } but shouldn't the default value then be reconsidered?

Hey would you let me know where I use { boundary: 'window' } I am currently having this issue and absolutely need responsive tables.

[simPod]

@warmwhisky check my PR https://github.com/twbs/bootstrap/pull/26844

[warmwhisky]

@warmwhisky check my PR #26844
Thank you :)

[cjsteven]

Hi guys I tried to put some media query in table-responsive. Like table-responsive-lg. It worked for me. I do hope also it might help you.