fixes tooltip insert problems #6378
Conversation
| @@ -126,7 +126,8 @@ | |||
| $tip | |||
| .detach() | |||
| .css({ top: 0, left: 0, display: 'block' }) | |||
| .insertAfter(this.$element) | |||
|
|
|||
| this.options.container && $tip.appendTo(this.options.container).length || $tip.insertAfter(this.$element) | |||
There was a problem hiding this comment.
just make this a ternary:
this.options.container ? $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element)There was a problem hiding this comment.
I added the .length there to make sure it got inserted in case the element wasnt on the page, and if not then it would still get the default insertAfter() otherwise it wouldnt show up if the container wasnt there
I'll make your change as you suggested though
There was a problem hiding this comment.
yeah i understood what it was doing, but it's too "magical"… better to fail if the intended container is missing
updated it to @fat's suggestion
| <td>string</td> | ||
| <td>''</td> | ||
| <td> | ||
| <p>Usefull if your tooltip is within a btn-group or modal</p> |
There was a problem hiding this comment.
i actually disagree with this. Tooltip will break if inserted in the body triggered on a modal because of z-index issues. Just remove this line.
|
@fat appreciate your support for this, and the comments. glad to know this has a possibility to be added |
|
yeah, looks great. thanks man! |
|
no problem glad to have it in finally :) |
|
Hope it is okay to ask this directly here. How can I append the tooltip/popover directly into the triggering element, with this new 'container' possibility, without using an unique ID? In my specific case I have a list (UL) with a couple of LI>A children, which trigger the popovers. And because I wan't to be able to hover also over the popovers themselves I need them nested within my trigger element. Cheers. |
|
@superflausch I was trying to come up with a solution with this request, but couldnt get one working corrently without the use of ids.. |
|
Missed that one. Thanks for the hint, will add this. Cheers. |
… to the page body. This removes a bug in some browsers (at least Chrome) in which the buttons moved a bit to the left on mouseover. See discussions about this issue: twbs/bootstrap#6811 twbs/bootstrap#6378 The bootstrap docs, by the way, describe the "container" option for the "tooltip" function, but they don't really explain what it does nor that it fixes this issue.
This adds a container option to the tooltip that can be called via html5 -
data-container="body"or javascript -$().tooltip({container: 'body'})if no container is given then it will get the default
insertAfter()strategyThis fixes a number of bugs that were introduced when we changed the
appendTo()toinsertAfter()If the tooltips are within a modal, and are inheriting its parents styles, then use
$().tooltip({container: '#modalID'})thanks to @WilliamStam and @blakeembrey for helping with this solution
some issues that noticed this bug
#5687 #6254 #6314 #6283 #6275 #6250 #6240 #6236 along with a lot more..
this is another resubmit of this.. previous pull request - #6321 with some tweaks to work with the 2.3 branch.