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

我没有尝试任何东西，因为我无法理解工具提示和元素之间的空间是从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.css中，您将找到以下代码：

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

更改或覆盖边距以更改工具提示与hover元素的距离。

IE要为工具提示的顶部位置设置更大的距离，请设置.tooltip.top类，如下所示：

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