本文介绍了更改 Bootstrap 工具提示颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想要做的是将工具提示颜色更改为红色.但是，我还想有多种其他颜色，所以我不想简单地替换原始工具提示的颜色.
我该怎么做?
解决方案
你可以这样使用:
在 CSS 中:
.tooltip-arrow,.red-tooltip + .tooltip >.tooltip-inner {背景颜色:#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 {边框底部颜色:#f00；/* 红色的 */}
完整片段:
$(function() {$('[data-toggle="tooltip"]').tooltip()})
.tooltip-main {宽度:15px；高度:15px；边界半径:50%；字体粗细:700；背景:#f3f3f3；边框:1px 实心 #737373;颜色:#737373；边距:4px 121px 0 5px；浮动:对；文本对齐:左！重要；}.tooltip-qm {向左飘浮;边距:-2px 0px 3px 4px;字体大小:12px；}.tooltip-内{最大宽度:236 像素！重要；高度:76px；字体大小:12px；填充:10px 15px 10px 20px；背景:#FFFFFF；颜色:RGBA(0, 0, 0, .7);边框:1px 实心 #737373;文本对齐:左；}.tooltip.show {不透明度:1；}.bs-tooltip-auto[x-placement^=bottom] .arrow::before,.bs-tooltip-bottom .arrow::before {边框底部颜色:#f00；/* 红色的 */}
<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>
<风格>.bs-tooltip-auto[x-placement^=bottom] .arrow::before,.bs-tooltip-bottom .arrow::before {边框底部颜色:#f00；/* 红色的 */}</style>
What I'm trying to do is change the tooltip color to red. However, I also want to have multiple other colors so I don't simply want to replace the original tooltip's color.
How would I go about doing this?
解决方案
You can use this way:
<a href="#" data-toggle="tooltip" data-placement="bottom"
title="" data-original-title="Tooltip on bottom"
class="red-tooltip">Tooltip on bottom</a>
And in the CSS:
.tooltip-arrow,
.red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}
jsFiddle
Moeen MH: With the most recent version of bootstrap, you may need to do this in order to get rid of black arrow:
.red-tooltip + .tooltip.top > .tooltip-arrow {background-color: #f00;}
Use this for Bootstrap 4:
.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
border-bottom-color: #f00; /* Red */
}
Full Snippet:
$(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>
这篇关于更改 Bootstrap 工具提示颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
