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

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


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

The below has worked for me in the past for tool tips involving absolute positioning:

$('[data-toggle="tooltip"]').tooltip({
   container: 'body'
});

I just trigger this script after everything is done rendering on the page and everything is set fine. Also in areas where there is an update to the tool tip I have to run this again.


You can also specify other containers (not only 'body') in tooltip config.

I had project with HTML like this:

<body>
    <div class='wrapper'>
    ...
        <div>
            <p>Test message with tooltip <span class="tooltip-icon" 
                     data-toggle="tooltip" 
                     data-placement="right"
                     title="Tooltip test">?</span></p>
        </div>
    ...
    </div>
</body>

and have issues with tooltip positioning calculation, using this JS:

$('[data-toggle="tooltip"]').tooltip({
   container: 'body'
});

As I understood, issue was caused by margin: 0 style of body element.

Trying to fix this problem without changing styles of body element and default markup, I've used other container, like this:

$('[data-toggle="tooltip"]').tooltip({
   container: '.wrapper'
});

and all worked perfectly without any changes.

From bootstrap documentation:

https://getbootstrap.com/docs/4.3/components/tooltips/#options

name:    container 
values:  string | element | false
default: false  
descr.:  Appends the tooltip to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize.

If you'll check bootstrap's tooltip.js, you'll see, that if you set container value as a string, it'll try to find element with given selector in DOM (see _proto._getContainer() method)

Tags:

Html

Css

Tooltip

Twitter Bootstrap

Recent Posts