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

【问题标题】：Twitter Bootstrap - how to add some more margin between tooltip popup and elementTwitter Bootstrap - 如何在工具提示弹出窗口和元素之间添加更多边距
【发布时间】：2013-03-14 03:30:08
【问题描述】：

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

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

如果可能，我想了解如何在 css 中执行此操作，以及是否可以同时用于右、左、上、下工具提示。

希望问题很清楚。

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

这就是我想做的事情以及之后的样子：

【问题讨论】：

我会发布图像更清晰
不适用于默认选项，您必须使用其他插件或根据需要更改脚本代码。
好，如果我需要解决问题，我可以使用 jquery，但我需要知道如何获取工具提示并添加更多边距

标签： javascript jquery css twitter-bootstrap

【解决方案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; }

【讨论】：

哦，这个测试太棒了

【解决方案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;
}

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

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

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

【讨论】：

非常感谢，我接受了另一个答案，只是因为他回复我的速度更快；）
没问题，这很公平；）
如果我的 .tooltip.top 只用于特定的 div 类怎么办

【解决方案3】：

这适用于 bootstrap 4v

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

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

示例：

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

【讨论】：

感谢您的解决方案有效，我想知道是否有任何方法可以将 css 仅应用于特定的工具提示

【解决方案4】：

这是完整的 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;
}

【讨论】：