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

Here is a codepen of the original problem

I had made the position of the body 'relative' so that my child elements could be positioned absolutely in the way I wanted, and I also had set the the body's margin to '0 auto' to center the content. These styles interfered with the tooltip container option solution that Eric mentioned in his answer.

/*original css*/
body {
  position: relative;
  width: 980px;

  /*set as important to work in codepen example*/
  margin:0 auto !important;
}

#sample-menu{
  position: absolute;
  top: 109px;
  left: 600px;
}

//js that didn't solve tooptip positioning issue
$(function(){
  $('[data-toggle="tooltip"]').tooltip({
    container: 'body'
  });
});

It was bad practice to have that styling applied to the body in the first place. Here is a codepen that solves this problem and still gives me the appearance and behavior I want without the tooltip issues. I added a container around the content to apply the styles, and then the tooltip "container: 'body' " solution that Eric G suggested worked.

/*new css with styling on a container div instead of the body*/
.container {
  position: relative;
  width: 980px;
  margin:0 auto;
}

#sample-menu{
  position: absolute;
  top: 109px;
  left: 600px;
}

//js now fixes the tooltip positioning issue
$(function(){
  $('[data-toggle="tooltip"]').tooltip({
   container: 'body'
  });
});