更改Bootstrap工具提示颜色
我正在尝试将 工具提示 颜色更改为红色。但是，我还希望有其他多种颜色，所以我不只是要替换原始工具提示的颜色。
我将如何去做呢？
问题答案：
您可以使用这种方式：
<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;}
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: rgb(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>
-
主要内容：用法,实例,选项,方法,实例,事件,实例当您想要描述一个链接的时候，提示工具（Tooltip）就显得非常有用。提示工具（Tooltip）插件是受 Jason Frame 写的 jQuery.tipsy 的启发。提示工具（Tooltip）插件做了很多改进，例如不需要依赖图像，而是改用 CSS 实现动画效果，用 data 属性存储标题信息。 如果您想要单独引用该插件的功能，那么您需要引用 tooltip.js。或者，正如 Bootstrap
-
我需要一些帮助我想改变工具提示基于按钮主色。 例如：如果按钮具有“主色”，则工具提示也应为“主色”。。。 超文本标记语言： jQuery： 实例：https://codepen.io/themes4all/pen/NWabvad
-
就像外面的数百个问题一样，我想改变暗示的颜色。本来我想在评论中问另一个这样的问题（未回答），但我没有足够的声誉，所以我在这里问。 我希望当提示在TextInputEditText中时是一种颜色，当它浮动时是另一种颜色。在其他帖子中，答案总是在视图聚焦时如何更改提示。那不是我想要的，我能做到。如果编辑文本不是空的，我想更改提示颜色。我正在使用材料设计textInputLayout和TextInput
-
我有一个工具栏。这张照片的背景颜色是明亮的橙色，最好看的颜色是白色而不是黑色。 我的默认颜色是黑色而不是白色。因为它会与其他东西冲突，所以几乎不可能被覆盖。我无法将主文本颜色更改为白色！ 我设法改变了标题的颜色。我现在正在寻找的是如何将操作按钮的颜色也更改为白色。 我的代码： 主要活动： 菜单栏： 风格：
-
我正在使用设计库中新的。我能够让它显示和改变浮动标签的颜色。不幸的是，实际的提示现在总是白色的。 我尝试过用XML、样式和编程方式更改hintColor，还尝试过使用android。支持v7。小装置。AppCompatiEditText但是提示始终显示白色。 这是我的和 下面是我用于的样式（我尝试将属性设置为黑色，但没有为我做任何事情）：
-
我在JavaFX中的工具提示有问题。为了说明这个问题的核心，我通过IntelliJ Idea创建了新的JavaFX项目。该项目的根窗格是HBox with，并且HBox包含四个按钮（文本：按钮A-D）。每个按钮都设置了带有文本的工具提示：示例工具提示A-B。通过fxml文件，我还加载了保存在名为styles.css.的文件中的级联样式 问题描述：我启动应用程序，当我将鼠标悬停在第一个按钮上时，它的