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

Question

我没有尝试过任何事情，因为我无法理解工具提示和元素之间的空间是从引导程序中创建/添加的，通常工具提示确实靠近触发工具提示事件的元素。

我只是想让工具提示稍微远离元素，以便从工具提示和元素中添加更多边距。

如果可能的话，我想了解如何在 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;
}

Answer 3

这将适用于引导程序 4v

类名发生了相当大的变化：

• .bs-工具提示-底部
• .bs-tooltip-top
• .bs-tooltip-right
• .bs-工具提示-左

例子：

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

Answer 4

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

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

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

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