CODEWITHSUNDEEP
jquerycsstwitter-bootstrapjquery-uitwitter-bootstrap-3
Simon Ordo
Simon Ordo

Reputation: 1667

Bootstrap Tooltip alignment issue after update?

I'm using JQuery 2.1.4 and Bootstrap 3.3.5 to create a tooltip on an element. It works great until it's time to update the tooltip via JavaScript.

Once the tooltip's text has been updated, the position of the tooltip is changed and it's hard to get it to display (gotta mouse over the very bottom of the target element).

I change the tooltip text like so:

$("#unsavedChanges").
                attr('title', "Changed Tooltip.  Extra annoying when it's kinda long like this one here.").
                tooltip('setContent').tooltip('fixTitle');;

I've also tried adding data-container="body", but since this particular element is "position:fixed", the tooltip is no longer attached to the element and moves independently when scroll with the mouse wheel.

Here's a fiddle (the red element is the one with the problem): https://jsfiddle.net/5dpzaqgo/

Any idea what's causing this and how to avoid it?

Upvotes: 3

Views: 510

Answers (1)

zero point
zero point

Reputation: 1308

It seems that the issue is only there is not enough space in the corner for the tooltip to show up. If you change left:100px on your div.style-switcher-btn-3, it will be resolved.

You can check out a working example in JSFIDDLE. I know you may not want to have your button group to be 100px away from the left corner, but you would see the issue with this example. It also works when you show the tooltip on the bottom of the element using data-placement="bottom".

Upvotes: 2

Related Questions