Twitter Bootstrap Question posted in

Bootstrap tooltip in wrong position on initial hover, then in correct position – Twitter bootstrap

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:
This is how the tooltip is displayed on the first hover

And here is how it is displayed on every hover after that:
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.

Tags:

7

Answers


  1. Chosen as BEST ANSWER
    0

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

  2. 0

    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.

    Login or Signup to reply.
  3. 0

    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)

    Login or Signup to reply.
  4. 0

    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')
    ;
});
    Login or Signup to reply.
  5. 0

    Here is cool fix: instead of using default Bootstrap’s tooltips you assign only custom data-hint:

    <button type="button" class="btn" data-hint="Add new column">

    and after EVERY change in the DOM you run this function:

    function _createTooltips(block) {
    block.find('[data-hint]:visible').each(function(index) {
        h = $(this).data('hint')
        $(this).data('toggle'   , 'tooltip')
        $(this).data('placement', 'bottom')
        $(this).data('title', h) 
        $(this).tooltip()
    });
}

    where block is any parent containing newly added elements containing hints. Easy and efficient. Also makes HTML shorter 🙂

    Login or Signup to reply.
  6. 0

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

    Login or Signup to reply.
  7. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search