在初始悬停时引导工具提示错误，然后放在正确的位置 [英] Bootstrap tooltip in wrong position on initial hover, then in correct position

问题描述

我使用的是Twitter引导程序在网页div上的工具提示。工具提示已初始化，但在第一次悬停时，它处于错误的位置;但是，在随后的盘旋中，工具提示处于正确的位置。

我认为问题在发生，因为工具提示所附带的div绝对是定位的。 p>

以下是html中的div标签：

 < div class =btn-groupid =sample-menudata-toggle =tooltipdata-placement =lefttitle =Tooltip on left> 
  

这是第一个悬停时显示的工具提示：

下面是它在每次悬停后的显示方式：

（尺寸不会改变屏幕截图尺寸）

应用于div的样式为：

 ＃sample-menu {
 position：绝对; 
 top：95px; 
 right：608px; 
} 
  

我可以用不同的方式定位div来让它起作用，我只是不知道为什么工具提示似乎完全在绝对定位的div上工作，但只能在第一次悬停后才能正常工作。

**我在div上添加了一些不提示的工具提示绝对定位和我有同样的问题（工具提示的第一次出现从我的元素中删除，然后在第一次出现后它是正确的）。我在页面上添加了一个svg，使用javascript（d3）添加和调整大小。看起来我需要在添加/调整所有页面元素后调用某些工具提示来重新定位工具提示，但是，Bootstrap Tooltip或Tether重新定位解决方案都不适用于我。

h2_lin>解决方案

以下是原始问题的 codepen

我把身体的位置设定为相对的，这样我的孩子元素就可以完全按照我想要的方式定位了，而且我还设定了身体的边缘以'0 auto'为中心的内容。这些样式干扰了Eric在他的回答中提到的工具提示容器选项解决方案。

  / *原始css * / 
 body {
 position：relative; 
 width：980px; 
 
 / *设置为在codepen示例中工作的重要性* / 
 margin：0 auto！important; 
} 
 
＃sample-menu {
 position：absolute; 
 top：109px; 
 left：600px; 
 
 
 // js没有解决tooptip定位问题
 $（function（）{
 $（'[data-toggle =tooltip] '）.tooltip（{
 container：'body'
}）; 
}）; 
  

首先将这种造型应用于身体是一种糟糕的做法。这是一个 codepen解决这个问题，仍然给我的外观和行为，我想要没有工具提示问题。我在内容周围添加了一个容器以应用样式，然后在Eric G建议的工具提示container：'body'解决方案中工作。

  / *新的css风格的容器div而不是body * / 
 .container {
 position：relative; 
 width：980px; 
 margin：0 auto; 
} 
 
＃sample-menu {
 position：absolute; 
 top：109px; 
 left：600px; 
 
 
 // js现在修复工具提示定位问题
 $（function（）{
 $（'[data-toggle =tooltip]'） .tooltip（{
 container：'body'
}）; 
}）; 
  

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.

解决方案

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

这篇关于在初始悬停时引导工具提示错误，然后放在正确的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！