更改 Bootstrap 工具提示颜色

Question

我想要做的是将 工具提示 颜色更改为红色。但是，我还想要多种其他颜色，所以我不想简单地替换原始工具提示的颜色。

我该怎么做呢？

原文由 John Smith 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用这种方式：

 <a href="#" data-toggle="tooltip" data-placement="bottom"
   title="" data-original-title="Tooltip on bottom"
   class="red-tooltip">Tooltip on bottom</a>

在 CSS 中：

 .tooltip-arrow,
.red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}

jsFiddle

---

Moeen MH ： 使用最新版本的引导程序，您可能需要这样做才能摆脱黑色箭头：

 .red-tooltip + .tooltip.top > .tooltip-arrow {background-color: #f00;}

---

将其用于 Bootstrap 4：

 .bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
  border-bottom-color: #f00; /* Red */
}

完整片段：

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

 .tooltip-main {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-weight: 700;
  background: #f3f3f3;
  border: 1px solid #737373;
  color: #737373;
  margin: 4px 121px 0 5px;
  float: right;
  text-align: left !important;
}

.tooltip-qm {
  float: left;
  margin: -2px 0px 3px 4px;
  font-size: 12px;
}

.tooltip-inner {
  max-width: 236px !important;
  height: 76px;
  font-size: 12px;
  padding: 10px 15px 10px 20px;
  background: #FFFFFF;
  color: rgba(0, 0, 0, .7);
  border: 1px solid #737373;
  text-align: left;
}

.tooltip.show {
  opacity: 1;
}

.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
  border-bottom-color: #f00;
  /* Red */
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="tooltip-main" data-toggle="tooltip" data-placement="top" data-original-title="Hello world"><span class="tooltip-qm">?</span></div>
<style>
  .bs-tooltip-auto[x-placement^=bottom] .arrow::before,
  .bs-tooltip-bottom .arrow::before {
    border-bottom-color: #f00;
    /* Red */
  }
</style>

原文由 Praveen Kumar Purushothaman 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

引导程序 2

如果您也想更改插入符号/箭头，请执行以下操作：

 .red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}
.red-tooltip + .tooltip > .tooltip-arrow {border-bottom-color: #f00;}

或者

.red-tooltip + .tooltip > .tooltip-inner, .red-tooltip + .tooltip > .tooltip-arrow {background-color: #f00;}

jsFiddle：http: //jsfiddle.net/technotarek/2htZe/

更新：引导 3

您必须特定于 Bootstrap 3 中工具提示的方向。例如：

 .tooltip.top .tooltip-inner {
    background-color:red;
}
.tooltip.top .tooltip-arrow {
      border-top-color: red;
}

使用 Bootstrap 3 的所有工具提示方向的 jsFiddle：http: //jsfiddle.net/technotarek/L2rLE/

原文由 technoTarek 发布，翻译遵循 CC BY-SA 3.0 许可协议