Bootstrap Tooltip In Wrong Position On Initial Hover, Then In Correct Position

July 31, 2024 Post a Comment

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

Solution 1:

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.

Solution 2:

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

I had project with HTML like this:

<body><divclass='wrapper'>
    ...
        <div><p>Test message with tooltip <spanclass="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 | falsedefault: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)

Solution 3:

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

Solution 4:

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

Solution 5:

I had the same issue with Bootstrap 4 and since the other answers here did not work for me (those with container: 'body'), I fixed it for the moment by initializing it only on the first mousenter. (after that the attribute "data-original-title" will exist)

An extra good thing with this code is that the tooltip will work for every new item on the page that is not part of the DOM yet. That is because we start from $(document).on('mouseenter', ...)

/**
 * This code will execute only once when hovering the first time (mouseenter). 
 * Then we close it and open it again for fixing wrong placement.
 * (It happens without noticing it)
 */
$(document).on('mouseenter', '[data-toggle="tooltip"]:not([data-original-title])', function() {
    $(this)
        .tooltip()
        .tooltip('show')

        /**
         * Fix for wrong placement when Bootstrap's tooltip open the first time
         */
        .tooltip('hide')
        .tooltip('show')
    ;
});

Html5 Developer