Twitter Bootstrap - 如何在工具提示弹出窗口和元素之间添加更多边距

Question

我没有尝试任何东西,因为我无法理解工具提示和元素之间的空间是从bootstrap创建/添加的,通常工具提示实际上是触发工具提示事件的元素附近.

我只想让工具提示从元素开始一点点,从工具提示和eleemnt中添加更多的余量.

如果可能的话,我想了解如何在css中执行此操作,如果可以将其设置为右侧,左侧,顶部,底部工具提示

希望问题很清楚.

这是工具提示在我的应用上的外观:

这就是我想做的事情以及他们应该如何照顾

Answer 1

这是顶部工具提示的默认CSS:

.tooltip.top {
  padding: 5px 0;
  margin-top: -3px;
}

您可以在自己的CSS中覆盖它:

.tooltip.top {
  margin-top: -10px;
}

请注意,此代码仅适用于顶部的工具提示,您将需要使CSS适应其他3个方向:

.tooltip.top    { margin-top: -10px; }
.tooltip.right  { margin-left: 10px; }
.tooltip.bottom { margin-top: 10px;   }
.tooltip.left   { margin-left: -10px; }

Answer 2

这是完整的 Bootstrap 4 解决方案

.bs-tooltip-top {
    top: -10px !important;
}

.bs-tooltip-right {
    left: 10px !important;
}

.bs-tooltip-bottom {
    top: 10px !important;
}

.bs-tooltip-left {
    left: -10px !important;
}