如何仅更改特定元素的引导工具提示样式？

Question

我有一个 id 为

pls_btn

的按钮。我已将工具提示位置设置为顶部。但我还希望工具提示距左侧有 100 像素的边距。经过一番挖掘，我发现

.tooltip-inner

可以达到我的目的。 所以当我设置

.tooltip-inner{
     margin-left:100px;
}

更改会反映在所有工具提示上。但当我这么做的时候

#pls_btn .tooltip-inner{
   ..
}
or
#pls_btn>.tooltip-inner{
   ..
}

一切都按默认进行。我只想为一个元素设置此工具提示样式。我该怎么做？

Answer 1

您必须使用兄弟姐妹选择器，请参阅下面的示例：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<style>
  .blue-tooltip + .tooltip > .tooltip-inner {background-color: blue;}
  .blue-tooltip + .tooltip > .tooltip-arrow { border-bottom-color: blue; }
</style>

<div class="well">
  
    <button type="button" class="btn btn-default blue-tooltip" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bototm">Blue Tooltip on bottom</button>
  
</div>

<script>
  $(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
</script>

Answer 2

您可以添加

data-bs-custom-class="custom-tooltip

，然后自定义该特定类，如自定义工具提示部分下的 Bootstrap 文档中所写（仅在版本 5.2 之后添加）：https://getbootstrap.com/docs/5.2/components/tooltips /