如何更改 Bootstrap 工具提示的颜色？-css教程-PHP中文网

如何更改 Bootstrap 工具提示的颜色？

Linda Hamilton

发布： 2024-12-18 04:31:14

原创

753 人浏览过

How Can I Change the Color of Bootstrap Tooltips?

如何更改 Bootstrap 工具提示颜色

更改 Bootstrap 中的工具提示颜色可让您自定义其外观以匹配您网站的设计。这可以通过添加自定义 CSS 样式来实现。

要更改工具提示颜色，请首先为使用工具提示的元素分配一个唯一的类。例如：

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

登录后复制

这会将工具提示的箭头和内部背景更改为红色。您可以将 #f00 替换为任何所需的颜色代码，以自定义工具提示的颜色。

在 Bootstrap 4 中，您可能需要专门定位底部放置箭头以删除默认的黑色：

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

登录后复制

此外，对于 Bootstrap 4，请使用以下 CSS 作为工具提示：

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

登录后复制

以上是如何更改 Bootstrap 工具提示的颜色？的详细内容。更多信息请关注PHP中文网其他相关文章！