Tooltip doesn't work on modal version bootstap 2.1.1

[purwandi]

On official http://twitter.github.com/bootstrap/javascript.html#modals

1. Click the modal demo
2. Hover tooltip it seems not working

[purwandi]

And popover also is not work on modal version bootstrap 2.1.1

[mikaelkael]

It was OK (at least for tooltip) before d797a5f

[demike]

The z-index for tooltips, popovers ... has changed
however reverting the changes is not the right way to fix this.

To stop all these z-index issues with tooltips and popovers:
modify line 124 of bootstrap-tooltips.js from ".appendTo(inside ? this.$element : document.body)" to
".insertAfter(this.$element)"

[mlynch]

The tooltip plugin already supports this. If you prefix your placement with "in " it will place the tooltip inside the element. So to have the tooltip placed at the top but inside the element, us a placement like this:

$('#element').tooltip({
  placement: 'in top'
});

[Nickvda]

@mlynch : sadly, that did not fix it for me. I have tried to do it through data-placement="in top" and the snippet you posted.

[demike]

@Nickvda: have you tried changing the 2 lines in js (look at the pull request)? This solved all z-index issues for me.

[mlynch]

@Nickvda Hmm, well I had the exact same problem reported in this issue and my snippet works for me, so I'm not really sure what the issue is. You could try using the JS snippet rather than a data attribute.

I just realized though that I am using the code from master. I grabbed the code on September 16th.

[Nickvda]

@demike : where exactly? Gotta admit JS isn't my strong point.

@mlynch : neither the JS snippet nor the data attribute work (in a modal). When out of a modal both tooltips and popovers work like a charm.

Thanks for the feedback:)

P.S. I also grabbed the latest version of Bootstrap just to be sure, didn't help much though.

[demike]

Look at the diff in pull request #5071.
It shows all lines that were changed.
Actually I changed only 2 lines (bootstrap-tooltip.js) then ran make.
But if you do not want to run make (maybe you do not have node.js and the other things for minifying ... installed)
you can just change the other files too.

The only thing this patch does: Do not attach the tooltips / popovers to the body but leave them in the same
... "nesting level" when showing

[purwandi]

For this issue i think is a bug on CSS, see #5186
This patch is work for me :)

[mlynch]

@Nickvda Not to beat a dead horse, but make sure if you are using the placement: 'in top' that the container you are inserting it into has position: relative set on it otherwise the tooltip won't show up.

[Nickvda]

@mlynch thnx- gonna check that tomorrow (no access at home yet >.>) :D

[Nickvda]

@mlynch : that doesn't seem to work either. However, I did forget to mention it is in, a modal->tab->tooltip. If it is directly in a modal, it does work.

[fat]

fixed in 2.1.2 - thanks guys!

[polomasta]

This change totally screws with popover styling if the popover is added inside of elements that have specific styles that cascade down to children.... very frustrating.

[Yohn]

@polomasta I created a fiddle with a fix for this, just havent submitted the pull request yet.. - http://jsfiddle.net/R23KB/4/