如何自定义 Bootstrap 工具提示颜色？

自定义 Bootstrap 工具提示颜色

默认情况下，Bootstrap 中的工具提示为单一颜色。但是，您可能会遇到需要多种颜色变化的情况。以下是实现此自定义的综合指南：

使用 CSS

要更改工具提示颜色，请将自定义类添加到触发工具提示的元素：

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

在 CSS 中，定义自定义样式class:

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

这会将具有 red-tooltip 类的元素的工具提示颜色更改为红色。

定位特定的工具提示位置

如果您需要根据工具提示位置进行颜色自定义，请考虑以下：

对于 4 之前的 Bootstrap 版本

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

此代码指定放置在底部的工具提示的颜色。您可以修改 x-placement 属性中的展示位置以定位其他展示位置。

其他资源和演示

要尝试上述方法，请访问此 jsFiddle:
[fiddle link]

按照以下步骤，您可以创建自定义工具提示颜色以满足您的设计要求。

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