css - 如何仅更改特定元素的 Bootstrap 工具提示样式？

Question

我有一个 ID 为 pls_btn 的按钮。我已将工具提示位置设置为顶部。但我也希望工具提示从左边有 100 像素的边距。经过一番挖掘，我发现 .tooltip-inner 可以满足我的目的。所以当我设置

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

更改会反射(reflect)在所有工具提示上。但是当我这样做的时候

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

一切正常。我只想为一个元素设置此工具提示样式。我该怎么做？

Answer 1

您必须使用 siblings selectors , 请参见下面的示例:

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