11

I'm having strange issue when having absolutely positioned element with Bootstrap tooltip.

Tooltip is not rendered correctly according to parent element, please see fiddle: [http://jsfiddle.net/QsYPv/152/][1]

When parent element is not positioned absolutely everything is working just fine. Any ideas how to resolve this issue?

Note: I can't set CSS with of absolutely positioned element?

2 Answers 2

32

this should fix it

$('a[data-toggle="tooltip"]').tooltip({
   container: 'body'
});
1
  • 1
    Sweeet @godmode works like charm. I owe you beer six pack :)
    – SirInfant
    Aug 4, 2015 at 14:25
1

Make sure the element with position:absolute has some positive z-index if it's supposed to lay overtop of another element:

<div style="position:relative">
    <div style="position:absolute;z-index:1" data-toggle="tooltip" title="some tooltip">
        <span>absolute-flow</span>
    </div>
    <span>inline-flow</span>
</div>
1
  • My elements had the same undefined z-index. This did not cause problems with the absolute-ly positioned element showing, but the tooltip would not show on hover. Making the z-index some positive value allowed the tooltip to pop. Oct 12, 2020 at 14:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.