Question

我正在设计一个joomla水平滚动网站，指定身体的宽度为4500px宽，并且绝对定位我想要的内容（尝试了不同方式的负载，这个对我来说效果最好）。如果我指定data-position"bottom"，问题是引导工具提示不能正确定位自己我已经尝试将{ container: 'body' }添加到js工具提示初始化中，但它不能解决问题（因为正文的宽度比视口宽）。

令我烦恼的是，任何人都可以帮忙。

我创建了一个bootply，代码在下面以供参考

enter image description here

JS如下：

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

CSS如下：

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

HTML如下：

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

编辑：在http://www.bootply.com/x1xfg7Z19J上发布了问题：官方回复“由于它是v3，因此无法解决问题。”所以我想这是一个问题，但我必须忍受。我确实尝试了使用bootstrap 4alpha和工具提示正确定位的场景。

编辑2：使用bootplys bootstrap版本选择，我发现在引入bootstrap 3.2.0之前，工具提示正确对齐。我将尝试下载3.1.1并查看是否可以发现错误。

bootstrap工具提示问题与绝对位置和身体水平滚动

0 个答案: