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

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.

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

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.