如何仅为特定元素应用CSS提示框？Bootstrap 4中单独设置提示框外边距？

要给特定元素单独定制提示框样式其实很简单——核心就是给这个元素加个专属的自定义类名，然后用CSS精准定位它对应的提示框就行。具体步骤如下：

• 第一步，给目标元素加自定义类，比如给按钮加个custom-tooltip-trigger：

<button class="btn btn-primary custom-tooltip-trigger" data-toggle="tooltip" title="这是专属样式的提示框">鼠标悬停看看</button>

• 第二步，利用Bootstrap提示框的DOM结构，通过触发元素的自定义类来嵌套选择提示框。因为Bootstrap的提示框会动态生成在触发元素旁边，咱们可以用相邻兄弟选择器+来关联：

/* 给这个专属提示框设置右侧外边距 */
.custom-tooltip-trigger + .tooltip.bs-tooltip-right {
  margin-left: 30px;
}

/* 要是想改背景色、文字色也一样，精准定位tooltip-inner */
.custom-tooltip-trigger + .tooltip .tooltip-inner {
  background-color: #28a745;
  color: #fff;
  border-radius: 4px;
}

这样操作后，只有带custom-tooltip-trigger类的元素的提示框会应用这些样式，完全不会影响其他提示框~

你现在的代码问题在于，.tooltip.bs-tooltip-right是全局选择器，会把页面上所有右侧提示框都选中，所以没法单独设置。咱们调整下思路，给需要单独设置的触发元素加个唯一标识，就能精准定位了：

修正后的完整方案： #

1. 先给目标触发元素加个自定义类，比如single-tooltip：

<button class="btn btn-primary single-tooltip" data-toggle="tooltip" title="这个提示框有单独的外边距">带专属外边距的提示框</button>

2. 修改CSS选择器，通过触发元素的类来关联它的提示框：

/* 只针对这个专属元素的右侧提示框设置外边距 */
.single-tooltip + .tooltip.bs-tooltip-right {
  margin-left: 30px;
}

/* 按钮的上边距，尽量不用!important，给按钮加类后直接定位更规范 */
button.single-tooltip {
  margin-top: 20px;
}

3. JS初始化部分保持不变就行：

$('[data-toggle="tooltip"]').tooltip();

为啥原来的代码不行？ #

因为.tooltip.bs-tooltip-right会匹配所有右侧提示框，而通过触发元素的自定义类+相邻兄弟选择器，就能精准绑定到单个提示框，实现你要的单独设置效果啦~

内容的提问来源于stack exchange，提问作者SilverSurfer