Bootstrap tooltip in wrong position on initial hover, then in correct position

Question

I am using the tooltips from the twitter bootstrap on a div on a webpage. The tooltip is initialized, but on the first hover it is in the wrong position; however, on the subsequent hovers the tooltip is in the correct position.

I think the problem is occurring because the div that the tooltip is attached to is absolutely positioned.

Here is the div tag in my html:

<div class="btn-group" id="sample-menu" data-toggle="tooltip" data-placement="left" title="Tooltip on left">

This is how the tooltip is displayed on the first hover:

And here is how it is displayed on every hover after that:

(sizes are not changing just the screenshot crop size)

The styles applied to the div are:

#sample-menu {
  position: absolute;
  top: 95px;
  right: 608px;
}

I could probably position the div differently to get this to work, I am just wondering why the tooltip seems to work perfectly on the absolutely positioned div, but only after the first hover.

** I added a few more tooltips on divs that aren't absolutely positioned and I have the same problem (first appearance of the tooltip is removed from my element, and then after the first appearance it is correct). I have an svg on the page with elements that are being added and sized with javascript (d3). It seems like I need to call something to reposition the tooltips after all page elements are added/sized, however, none of the Bootstrap Tooltip or Tether repositioning solutions have worked for me.

Answer 1

adding boundary: 'window' solved this issue for me, like the following:

       $(document).ready(function () {
            $('[data-toggle="tooltip"]').tooltip({
                trigger: 'hover click focus',
                boundary: 'window'
            })
        });

from bootstrap documintation:

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':

Answer 2

I've had missalignment issues with jquery and bootstrap tooltips I coundn't fix (i.e. when using datatable ssp with horizontal scroll table). Only plugin worked for me: https://github.com/tiaanduplessis/wenk