Twitter bootstrap 3 绝对位置和躯干水平滚动的引导工具提示问题

我正在设计一个joomla水平卷轴网站，通过指定正文的宽度为4500像素宽，绝对定位我想要的内容（尝试了不同的方式，这一个对我来说最合适）。问题是，如果我指定

数据位置“bottom”

我尝试将

{container:'body'}

添加到js工具提示初始化中，但它并没有解决问题（因为主体的宽度比视口宽）

我真讨厌，谁能帮帮我吗

我已经创建了一个引导层，下面的代码仅供参考

调查结果如下：

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

body {
  width: 4500px;
  position:relative;
  height: 100vh;
  overflow-x: visible;
}
.dyno {
  position: absolute;
  transition: none;
}
.zap-fb {
    background-color:#456789;
    background-size: 100% 100%;
}
.zap-fb:hover {
    background-color:#453698;
}
.zap-li {
    background-color:#763456;
    background-size: 100% 100%;
}
.zap-li:hover {
    background-color:#854a34;
}
.zap-pi {
    background-color:#912643;
    background-size: 100% 100%;
}
.zap-pi:hover {
    background-color:#7269c3;
}

<p>Scroll to the right to see the tooltip issue.  If you position the squares around the center of the screen and hover you will see the bottom positioned tooltip way off to the left.  If you position the squares to the right of the screen and hover to see the tool tip it is almost in the right position. Note without body position: relative, the tooltip boxes are wierd dimensions</p>
<a style="width:50px; height:50px; left:3144px; top:20px;" class="zap-fb dyno" data-block="268,292,left,3144,top,20" href="#" target="_blank" title="Spread the Word, Like Us on Facebook" data-toggle="tooltip" data-placement="right"></a>
<a style="width:30px; height:30px; left:2900px; top:10px;" class="zap-li dyno" data-block="240,250,left,2900,top,10" href="#" target="_blank" title="Promote your business whilst promoting ours" data-toggle="tooltip" data-placement="bottom"></a>
<a style="width:70px; height:70px; left:2700px; top:10px;" class="zap-pi dyno" data-block="200,208,left,2700,top,10" href="#" target="_blank" title="Share our work with the world" data-toggle="tooltip" data-placement="left"></a>

CSS如下所示：

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

body {
  width: 4500px;
  position:relative;
  height: 100vh;
  overflow-x: visible;
}
.dyno {
  position: absolute;
  transition: none;
}
.zap-fb {
    background-color:#456789;
    background-size: 100% 100%;
}
.zap-fb:hover {
    background-color:#453698;
}
.zap-li {
    background-color:#763456;
    background-size: 100% 100%;
}
.zap-li:hover {
    background-color:#854a34;
}
.zap-pi {
    background-color:#912643;
    background-size: 100% 100%;
}
.zap-pi:hover {
    background-color:#7269c3;
}

<p>Scroll to the right to see the tooltip issue.  If you position the squares around the center of the screen and hover you will see the bottom positioned tooltip way off to the left.  If you position the squares to the right of the screen and hover to see the tool tip it is almost in the right position. Note without body position: relative, the tooltip boxes are wierd dimensions</p>
<a style="width:50px; height:50px; left:3144px; top:20px;" class="zap-fb dyno" data-block="268,292,left,3144,top,20" href="#" target="_blank" title="Spread the Word, Like Us on Facebook" data-toggle="tooltip" data-placement="right"></a>
<a style="width:30px; height:30px; left:2900px; top:10px;" class="zap-li dyno" data-block="240,250,left,2900,top,10" href="#" target="_blank" title="Promote your business whilst promoting ours" data-toggle="tooltip" data-placement="bottom"></a>
<a style="width:70px; height:70px; left:2700px; top:10px;" class="zap-pi dyno" data-block="200,208,left,2700,top,10" href="#" target="_blank" title="Share our work with the world" data-toggle="tooltip" data-placement="left"></a>

HTML格式如下：

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

body {
  width: 4500px;
  position:relative;
  height: 100vh;
  overflow-x: visible;
}
.dyno {
  position: absolute;
  transition: none;
}
.zap-fb {
    background-color:#456789;
    background-size: 100% 100%;
}
.zap-fb:hover {
    background-color:#453698;
}
.zap-li {
    background-color:#763456;
    background-size: 100% 100%;
}
.zap-li:hover {
    background-color:#854a34;
}
.zap-pi {
    background-color:#912643;
    background-size: 100% 100%;
}
.zap-pi:hover {
    background-color:#7269c3;
}

<p>Scroll to the right to see the tooltip issue.  If you position the squares around the center of the screen and hover you will see the bottom positioned tooltip way off to the left.  If you position the squares to the right of the screen and hover to see the tool tip it is almost in the right position. Note without body position: relative, the tooltip boxes are wierd dimensions</p>
<a style="width:50px; height:50px; left:3144px; top:20px;" class="zap-fb dyno" data-block="268,292,left,3144,top,20" href="#" target="_blank" title="Spread the Word, Like Us on Facebook" data-toggle="tooltip" data-placement="right"></a>
<a style="width:30px; height:30px; left:2900px; top:10px;" class="zap-li dyno" data-block="240,250,left,2900,top,10" href="#" target="_blank" title="Promote your business whilst promoting ours" data-toggle="tooltip" data-placement="bottom"></a>
<a style="width:70px; height:70px; left:2700px; top:10px;" class="zap-pi dyno" data-block="200,208,left,2700,top,10" href="#" target="_blank" title="Share our work with the world" data-toggle="tooltip" data-placement="left"></a>

向右滚动查看工具提示问题。如果将正方形放置在屏幕中心周围并悬停，您将看到位于底部的工具提示位于左侧。如果将方块放置在屏幕右侧，并悬停以查看工具提示，则它几乎处于正确位置。注：如果没有主体位置：相对，则工具提示框为wierd尺寸

编辑：将问题发布在：官方回复“由于是v3，所以作为a关闭无法修复”。因此，我想这是一个问题，但我不得不接受。我确实尝试过使用引导4alpha的场景，工具提示正确定位了自己

---

编辑2:使用bootplys bootstrap version select，我发现在引入bootstrap 3.2.0之前，工具提示是正确对齐的。我将尝试下载3.1.1，看看是否能发现错误。

您找到解决问题的方法了吗？@lars moelleken这是我的解决方法。我认为这对你很有用。@JaiKumaresh我测试过了，但是没有。如果我把鼠标悬停在工具提示上，那么整页就会开始左右摇晃。@LarsMoelleken，这不是什么大问题。身体滚动条的显示/隐藏就是这样。现在，你的问题已经解决了。。？