Tooltips/Popovers applied inside of specific elements has side effects #5709

Tape opened this Issue Oct 30, 2012 · 6 comments

6 participants


See jsfiddle link at the bottom of the comment. I was using icons for popover functionality as a "training mode" of sorts. The new functionality they provide in 2.2.0 breaks the expected behavior though.


work fine..


atleast in chrome, the content of the popover is shown with the font settings of the heading.


There is no issue here. All of the content is in an h3 tag, thus making it big and bold. Try closing the h3 after the "Some Heading" text, and it will work as expected. Then use a different method to keep the icon on the same line as your heading.

(I think the original question was edited as I was typing my comment, as it mentioned something about the content being the same font as the heading next to the icon.)


the old js had the option to append the popover / tooltip to body vs the element. i use position absolute in my project... with overflow hidden.. so the popovers are being hidden if they near the side etc. had to change the js to allow it to be appended to body again


the bootstrap tooltip plugin js

old (2.1)

          .css({ top: 0, left: 0, display: 'block' })
          .appendTo(inside ? this.$element : document.body)

new (2.2)

          .css({ top: 0, left: 0, display: 'block' })

please give us an option to add it to body again natively? instead of having to remember to edit the js file every update of BS we do :P

Bootstrap member
mdo commented Nov 1, 2012

Closing as dupe of #5687.

@mdo mdo closed this Nov 1, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment