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.

Answer 1

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.

Answer 2

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(); });