Bootstrap tooltip in wrong position on initial hov

2019-07-03 15:09发布

站内问答 / HTML/CSS
1384 3 5

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.

3条回答
做个烂人
2楼-- · 2019-07-03 15:16

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)

查看更多
0人赞 添加讨论(0) 举报
贼婆χ
3楼-- · 2019-07-03 15:17

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'
  });
});
查看更多
0人赞 添加讨论(0) 举报
老娘就宠你
4楼-- · 2019-07-03 15:28

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)