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

类名已经发生了巨大变化：

• .bs-tooltip-bottom
• .bs-tooltip-top
• .bs-tooltip-right
• .bs-tooltip-left

示例：

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

Answer 3

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

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

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

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

Answer 4

这是完整的Bootstrap 4解决方案

pyuic4 test.ui -o test.py