Twitter Bootstrap Tooltip: flickers when placed on top of button, but works fine when placed at the left/right/bottom

Question

I am dealing with some weird behavior for an instance of bootstrap's tooltip.

The page I am working with has several buttons that, when hovered over, display tooltips with the description for the buttons' functionality. The tooltips are all displayed on top of the buttons, and, with the exception of one button, everything works fine. This one button displays the tooltip with a continuous flickering, the tooltip itself covers part of the button (instead of being completely on top of the button), and prevents the button from being properly clicked. If the "data-placement" for the tooltip is changed from "top" to "left"/"right"/"bottom", the tooltip is displayed correctly.

Additionally, the button that gives me problems is wrapped in a div that has "float: right;" assigned in the css. I am mentioning this because I noticed that if I remove the float, the tooltip works fine. Unfortunately, if I remove the float, the button itself loses its correct positioning.

While I could give up the "top" positioning for the tooltip, I was hoping that there might be an easy trick to this problem. Does anyone have any suggestions?

Thank you.

Update:

This StackOverflow question presents the same problem as the one I was encountering. I found the answer useful.

Solution 1

I found a quick solution for my problem. Although relatively short, my initial tooltip description was getting split on two lines. By chance, I tried shortening the tooltip text to fit on a single line. Once this was done, the tooltip was properly displayed. Therefore, I am assuming there must be a problem with the length of the tooltip text and the fact that the button is displayed all the way to the right of the page (and at the top of the page). I will not investigate this further for the time being.

Solution 2

Add to the tooltip pointer-events: none; css rule, like

.tooltip {
  pointer-events: none;
}

This will prevent tooltip from being target for mouse events and will resolve the issue.

Solution 3

Read The Docs

The docs on Bootstrap 4 explicitly address this issue and also provide a solution:

Overflow auto and scroll

Tooltip position attempts to automatically change when a parent container has overflow: auto or overflow: scroll like our .table-responsive, but still keeps the original placement’s positioning. To resolve, set the boundary option to anything other than default value, 'scrollParent', such as 'window':

$('#example').tooltip({ boundary: 'window' })

So we have to set the boundary option to 'window'.

From the docs on the boundary option:

Overflow constraint boundary of the tooltip. Accepts the values of 'viewport', 'window', 'scrollParent', or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's preventOverflow docs.

Best Practice

That being said, the preferred way of initializing tooltips everywhere is to use '[data-toggle="tooltip"]' as selector:

$('[data-toggle="tooltip"]').tooltip({ boundary: 'window' })

Once And For All

Now if you are dynamically adding or removing elements (with tooltips) to the DOM or are even replacing the whole page without reloading it (i.e. by using a pushState library like PJAX) - or if you are just using modals (with tooltips) - you have to initialize those tooltips (again).

Fixing Tooltips On Elements

That's where the following function comes in handy, which destroys and recreates all tooltips. Call this function after you've added / removed an element to / from the DOM that has / had a tooltip attached.

function recreateTooltips() {
    $('[data-toggle="tooltip"]').tooltip('dispose').tooltip({boundary: 'window'});
}

This might seem expensive (and certainly is), but I've never noticed any performance impact even with dozens of tooltips on the same page.

Fixing Tooltips In Modals

To fix tooltips in modals, you simply bind the function from above to the 'shown.bs.modal' event, which fires after a modal is fully shown to the user.

/** Recreate tooltips upon showing modal */
$(document).on('shown.bs.modal', '*', function () {
    recreateTooltips();
});

Solution 4

I was having this same issue. I found that Bootstrap's tooltips do not position themselves correctly over "floated" or "inline/inline-block" elements when those elements are within a container with relative or absolute positioning. I have a button floated right, inside an absolutely positioned parent container. If I remove the absolute positioning of the parent, the tooltip displays perfectly fine. Bootstrap needs to address this.

Solution 5

This happens on inline elements, such as a tags. Setting the display property to block resolves the issue.

View more solutions

Comments

[mcoolive]

Similarly, I was able to workaround the issue by adding the property (container="body") to my button.

[Jeaf Gilbert]

Clean, straightforward, works like a charm. Thank you!

[AugustoM]

What if the tooltip is added to an hyperlink? This will cancel the click action from it?

[Peter Huisman 75]

Works for me adding the boundary

[Tom Heaps]

this totally solved the issue for me - thanks!

[basZero]

This solution sounded great, but it doesn't work (Bootstrap 4.5)