mkoryak/floatThead

Bootstrap tooltips displaying in wrong position

utilmind opened this issue · 12 comments

utilmind commented

Hello! I have created a page which demonstrates the problem with bootstrap tooltips:

http://utilmind.com/demos/2020/bug-floatthead-tooltips/

I'm going to investigate the problem and will try to find out a solution. But in case if this known issue (despite I did not found it in the list of closed issues), please let me know!

Thanks!

mkoryak commented

This is because the floated header lives inside of a div with overflow:hidden, and the tooltip does not like that.

try this, find .floatThead-container and remove the overflow prop, now your tooltips magically work, and the plugin does not!

if you want more help, please relocate this to a jsfiddle or jsbin where I can edit the code to provide you with a workaround.

  • 👍1
utilmind commented

if you want more help, please relocate this to a jsfiddle or jsbin where I can edit the code to provide you with a workaround.

Misha, thank you! I have copied the code to https://jsfiddle.net/utilmind/r4jkyx93/ and I will greatly appreciate your help!

mkoryak commented
mkoryak commented

actually, does this solve your problem:
Using position: 'absolute'
https://jsfiddle.net/7db92m54/

No it does not.. only when you have not scrolled into the table. I think we are on to something here..

utilmind commented

actually, does this solve your problem:
Using position: 'absolute'
https://jsfiddle.net/7db92m54/

No it does not.. only when you have not scrolled into the table. I think we are on to something here..

Yes. right :) It looks much better, but, tooltips still out of viewport when thead is in "sticky" state.

KHir3btsZq

mkoryak commented
utilmind commented

Latest version, 4.4.1 (see the code uses following external script: <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>)

And I found that actually when tooltip looks like it works correctly, it does not, demonstrating strange behavior.

By default Bootstrap tooltips should be displayed above the the HTML element with the tooltip, except cases when there is not enough space above.

Here is the demo with another tooltip, over floatThead link
https://jsfiddle.net/utilmind/2o70z8m4/

IxAZXMZnV4

mkoryak commented

I looked at this for a while. I would say that the bug is how bootstrap places the tooltip on transform: translated elements. I dont think that there is much that can be done from my side to fix things.

you can try not using floatThead and use position: sticky.
sorry I cant help you more.

utilmind commented

you can try not using floatThead and use position: sticky.

Yes, this is what I'm using now, but sticky does not works when table inside of the .table-responsive container.

Ok, thanks anyway! Actually I originally thought that it's well known problem or it can be easily fixed. Then I will play with it and try to fix myself. I will post my solution here in case if I will have a luck to fix it.

utilmind commented

I have fixed this problem, changing "overflow-x" to "overflow" in line #55 of jquery.floatThread.js

I did not tested, maybe this fix leads to some side effects, but it's completely fixed my problem. UPD. except strange behavior that tooltip always appears below the element (tooltip position is always "bottom". But it's still okay for my web app. I will use it as is.)

Here is the demo: http://utilmind.com/demos/2020/bug-floatthead-tooltips/

  • 👍1
mkoryak commented

Nice!

It is not overflow:hidden for dropdowns that live inside the header (and do not append themselves to body like this tooltip does).

I think that this is a perfectly reasonable fix for your use case.

richieri commented

Thanks, this also helped me a lot :)