工具提示在bootstrap模式中不起作用？

Question

我使用seiyria angular-bootstrap-slider作为范围滑块，但最初当页面加载时，工具提示处于错误的位置。当它被放置在普通页面时它工作正常，但是在模态中它最初处于错误的位置，但是当我点击它将被设置。所以如何解决这个问题。

HTML：

<button class="btn btn-default" value="modal"
        onclick="confirmChangeMaxHours();"><i
            class="glyphicon glyphicon-cog"></i> Adjust Value

这是链接：

Codepen

我在某个网站上发现了这个建议：

 setTimeout(function() {
slider.slider("relayout");
}, 500);

但是，在我必须给出setTimeout函数的地方，我试图给出但是它显示的错误就像没有定义Slider一样。

先谢谢。

Answer 1

将此css添加到您的代码中

.tooltip{

  margin-left:-32px!important
}

Answer 2

在我的实现中，模态超出了工具提示。因此，要解决此问题，我通过在所有工具提示上添加大的z-index来将工具提示置于所有元素上。

.tooltip.tooltip-top,
.tooltip.tooltip-bottom,
.tooltip.tooltip-left,
.tooltip.tooltip-right {
  z-index: 100000;
}