更改引导程序提示的颜色

我要做的是把 提示的颜色改成红色。但是，我也想有多个其他颜色，所以我不想简单地替换原来的工具提示的颜色。

我该怎么做呢？

429468 次浏览
小开
最佳答案

你可以这样使用:

<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 : < em > 使用最新版本的 bootstrap，你可能需要这样做来摆脱黑色箭头:

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

用这个来做引导程序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>

小开

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

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

更新: Bootstrap 3

在 Bootstrap 3中，你必须对工具提示的方向有特定的要求。例如:

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

使用 Bootstrap 3: http://jsfiddle.net/technotarek/L2rLE/对所有工具提示说明使用 jsFiddle

小开

如果你只是想改变颜色，你可以使用其他答案中提到的快速方法。但是，如果您使用 Bootstrap，那么您应该使用主题，以便外观和感觉是一致的。不幸的是，Bootstrap 没有内置的主题支持，所以我编写了一小段 CSS 来实现这一点。您基本上可以得到 tooltip-info、 tooltip-warning等类，这些类可以添加到元素中以应用主题。

你可以在这个答案中找到这段代码以及小提琴、例子和更多的解释: https://stackoverflow.com/a/20880312/207661

小开

我的 jQuery 补丁:

HTML:

   <a href="#" data-toggle="tooltip" data-placement="right" data-original-title="some text">
<span class="glyphicon glyphicon-question-sign"></span>
</a>

JQuery:

$('[data-toggle="tooltip"]').hover(function(){
$('.tooltip-inner').css('min-width', '400px');
$('.tooltip-inner').css('color', 'red');
});
小开

对于箭头颜色，可以使用以下方法:

.tooltip .tooltip-arrow {border-top: 5px solid red !important;}
小开

你可以用它来解决你的问题。我在我的项目中检查了它，它工作得很好。

<a class="btn btn-sm btn-success media-tooltip" href="#" data-toggle="tooltip" data-placement="bottom" title="Download Now">Download Now</a>
.media-tooltip + .tooltip .tooltip-inner {
font-size: 14px;
font-weight: 700;
color: rgb( 37, 207, 187 );
border-width: 1px;
border-color: rgb( 37, 207, 187 );
border-style: solid;
background-color: rgb( 219, 242, 239 );
padding: 10px;
border-radius: 0;
}
.media-tooltip + .tooltip > .tooltip-arrow{display: none;}
.media-tooltip + .tooltip .tooltip-inner:after, .media-tooltip + .tooltip .tooltip-inner:before {
bottom: 89%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}


.media-tooltip + .tooltip .tooltip-inner:after {
border-color: rgba(219, 242, 239, 0);
border-bottom-color: #dbf2ef;
border-width: 10px;
margin-left: -10px;
}
.media-tooltip + .tooltip .tooltip-inner:before {
border-color: rgba(37, 207, 187, 0);
border-bottom-color: #25cfbb;
border-width: 11px;
margin-left: -11px;
}
小开

为我工作的唯一方法:

.tooltip.bottom .tooltip-arrow{
border-bottom-color:#F00;
}
小开

为我工作的唯一方法:

$(document).ready(function() {
//initializing tooltip
$('[data-toggle="tooltip"]').tooltip();
});
.tooltip-inner {
background-color: #00acd6 !important;
/*!important is not necessary if you place custom.css at the end of your css calls. For the purpose of this demo, it seems to be required in SO snippet*/
color: #fff;
}


.tooltip.top .tooltip-arrow {
border-top-color: #00acd6;
}


.tooltip.right .tooltip-arrow {
border-right-color: #00acd6;
}


.tooltip.bottom .tooltip-arrow {
border-bottom-color: #00acd6;
}


.tooltip.left .tooltip-arrow {
border-left-color: #00acd6;
}
<!--jQuery-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!--tether-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<!--Bootstrap-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>


<!--Tooltip Example-->
<div style="padding:50px;">
<span class="fa-stack fa-lg" data-toggle="tooltip" data-placement="right" title="custom colored tooltip">hover over me
</span>
</div>

小开

下面是 boostrap 中的工具提示代码..。

.tooltip {
position: absolute;
z-index: 1070;
display: block;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
line-height: 1.42857143;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
white-space: normal;
filter: alpha(opacity=0);
opacity: 0;


line-break: auto;
}
.tooltip.in {
filter: alpha(opacity=90);
opacity: .9;
}
.tooltip.top {
padding: 5px 0;
margin-top: -3px;
}
.tooltip.right {
padding: 0 5px;
margin-left: 3px;
}
.tooltip.bottom {
padding: 5px 0;
margin-top: 3px;
}
.tooltip.left {
padding: 0 5px;
margin-left: -3px;
}
.tooltip-inner {
max-width: 200px;
padding: 3px 8px;
color: #fff;
text-align: center;
background-color: #000;
border-radius: 4px;
}
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.tooltip.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-width: 5px 5px 0;
border-top-color: #000;
}
.tooltip.top-left .tooltip-arrow {
right: 5px;
bottom: 0;
margin-bottom: -5px;
border-width: 5px 5px 0;
border-top-color: #000;
}
.tooltip.top-right .tooltip-arrow {
bottom: 0;
left: 5px;
margin-bottom: -5px;
border-width: 5px 5px 0;
border-top-color: #000;
}
.tooltip.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -5px;
border-width: 5px 5px 5px 0;
border-right-color: #000;
}
.tooltip.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: -5px;
border-width: 5px 0 5px 5px;
border-left-color: #000;
}
.tooltip.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -5px;
border-width: 0 5px 5px;
border-bottom-color: #000;
}
.tooltip.bottom-left .tooltip-arrow {
top: 0;
right: 5px;
margin-top: -5px;
border-width: 0 5px 5px;
border-bottom-color: #000;
}
.tooltip.bottom-right .tooltip-arrow {
top: 0;
left: 5px;
margin-top: -5px;
border-width: 0 5px 5px;
border-bottom-color: #000;
}
小开

你可以这样使用:

在 CSS 中:

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

箭头是边框。
您需要为每个箭头更改对应的颜色。

.tooltip.top .tooltip-arrow {
border-top-color: @color;
}
.tooltip.top-left .tooltip-arrow {
border-top-color: @color;
}
.tooltip.top-right .tooltip-arrow {
border-top-color:@color;
}
.tooltip.right .tooltip-arrow {
border-right-color: @color;
}
.tooltip.left .tooltip-arrow {
border-left-color: @color;
}
.tooltip.bottom .tooltip-arrow {
border-bottom-color: @color;
}
.tooltip.bottom-left .tooltip-arrow {
border-bottom-color: @color;
}
.tooltip.bottom-right .tooltip-arrow {
border-bottom-color: @color;
}
.tooltip > .tooltip-inner {
background-color: @color;
font-size: @font-size-small;
}

但是，如果我想添加一个类，以改变颜色(如在小提琴’。班级 + 。工具提示...’它不工作(引导程序3)。
如果有人知道怎么处理的话？

小开

这个问题已经得到了正确的回答，但是我认为我也应该给出我的意见。 就像 cozen 说的那样，这是一个边框，为了让它工作，你必须指定类来格式化它，就像 bootstrap 指定的那样。所以，你可以做到这一点

.tooltip .tooltip-inner {background-color: #00a8c4; color: black;}
.tooltip.top .tooltip-arrow {border-top-color: #00a8c4;}

或者您可以做下一个，只是为了工具提示-箭头，但是您必须添加！重要，以便它覆盖引导 CSS

.tooltip-arrow {border-top-color: #00a8c4!important;}
小开

Bootstrap 3 + 用于 底部的 SASS 工具提示:

.red-tooltip {
& + .tooltip.bottom {
.tooltip-inner{background-color:$red;}
.tooltip-arrow {border-bottom-color: $red;}
}
}
小开 

$(document).ready(function(){
$('.tooltips-elements')
.tooltip()
.each(function() {
var color = $(this).data('color');
$(this).hover(function(){
var aria = $(this).attr('aria-describedby');
$('#' + aria).find('.tooltip-inner').css({
"background": color,
"color" : "#333",
"margin-left" : "10px",
"font-weight" : "700",
"font-family" : "Open Sans",
"font-size" : "13px",
});
$('#' + aria).find('.tooltip-arrow').css({
"border-bottom-color" : color,
});
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>




<a href="#" class="tooltips-elements" data-toggle="tooltip"  data-placement="bottom" data-original-title="Here comes the tooltip" data-color="red">Hover me</a>

检查这个也许它可以帮助你。你可以有多个工具提示颜色。

小开

对于箭头，首先确认所使用的方向。 例如，我使用 left方向，那么它应该是

.tooltip .tooltip-inner {
background-color:#2fa5fb;
}
.tooltip.left > .tooltip-arrow {
border-left-color: #2fa5fb;
}
小开

我们在我们的网站上使用 bootstrap 3.0，但是上面的步骤都不能更新工具提示的样式。但我确实找到了使用 jQueryUI 样式的解决方案

Https://jqueryui.com/tooltip/#custom-style

CSS

  .ui-tooltip, .arrow:after {
background: black;
border: 2px solid white;
}
.ui-tooltip {
padding: 10px 20px;
color: white;
border-radius: 20px;
font: bold 14px "Helvetica Neue", Sans-Serif;
text-transform: uppercase;
box-shadow: 0 0 7px black;
}

超文本标示语言

<div class="qu_help" data-toggle="tooltip" title="Some Random Title">
<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
</div>

我添加这个答案是为了以防其他人也处于类似的情况。

小开

值得注意的是，从 Bootstrap 4开始，你可以直接在 Bootstrap Sass 变量文件中定制这些样式，所以在 _ variable.scss 中，你可以使用以下选项:

//== Tooltips
//
//##


// ** Tooltip max width
$tooltip-max-width:           200px !default;
// ** Tooltip text color
$tooltip-color:               #fff !default;
// ** Tooltip background color
$tooltip-bg:                  #000 !default;
$tooltip-opacity:             .9 !default;


// ** Tooltip arrow width
$tooltip-arrow-width:         5px !default;
// ** Tooltip arrow color
$tooltip-arrow-color:         $tooltip-bg !default;

看这里: http://v4-alpha.getbootstrap.com/getting-started/options/

最好的工作在 Sass 和编译，因为你去 Grunt 或 Gulp 构建工具。

小开

当我想改变引导工具提示的背景颜色时，这个简单的方法对我很有用:

$(function(){
//$('.tooltips.red-tooltip').tooltip().data('bs.tooltip').tip().addClass('red-tooltip');
$('.tooltips.red-tooltip').tooltip().data('tooltip').tip().addClass('red-tooltip');
});
.red-tooltip.tooltip.tooltip.bottom .tooltip-arrow,
.red-tooltip.tooltip.tooltip.bottom-left .tooltip-arrow,
.red-tooltip.tooltip.tooltip.bottom-right .tooltip-arrow{border-bottom-color: red;}
.red-tooltip.tooltip.top .tooltip-arrow {border-top-color: red;}
.red-tooltip.tooltip.left .tooltip-arrow {border-left-color: red;}
.red-tooltip.tooltip.right .tooltip-arrow {border-right-color: red;}
.red-tooltip.tooltip > .tooltip-inner{background-color:red;}
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-tooltip.js"></script>


<a href="#" data-toggle="tooltip" data-placement="bottom"
title="" data-original-title="Made by @Ram"
class="tooltips red-tooltip">My link with red tooltip</a>

注一:

如果 js代码包括 .data('tooltip')，那么请 评论它的路线和 无可奉告 js代码包括 .data('bs-tooltip')。

注 B:

如果 您的引导工具提示函数添加一个工具提示 到主体的末端(不要紧跟在元素后面)，我的解决方案还是很有效的，但是本页中的其他一些答案不能像本场景中的 @ Praveen Kumar和 @ techTarek那样工作。

注 C:

这些代码在工具提示的所有位置(top，bottom，left，right)都支持 tooltip arrow颜色。

小开

如果你想使用 JQuery，你可以试试这个:

$('[data-toggle="tooltip"]').on('shown.bs.tooltip', function(){
$('.tooltip.bottom .tooltip-arrow').css('border-bottom-color', 'red');
$('.tooltip-inner').css('background-color', 'red');
});
小开

在 container: 'body'情况下，以上答案都不起作用，而以下解决方案起作用:

// Assign custom CSS class after the tooltip template has been added to the DOM
$(document).on('inserted.bs.tooltip', function(e) {
var tooltip = $(e.target).data('bs.tooltip');
tooltip.$tip.addClass($(e.target).data('tooltip-custom-class'));
});

以及一个简单的 CSS 片段:

.tooltip.tooltip-danger > .tooltip-inner {
background-color: #d9534f;
}


.tooltip.tooltip-danger.left > .tooltip-arrow {
border-left-color: #d9534f;
}

现在您可以像往常一样初始化您的工具提示，通过 data-tooltip-custom-class属性传递定制的 CSS 类:

<span class="js-tooltip">Hover me totally</span>


<script>
$('.js-tooltip')
.data('tooltip-custom-class', 'tooltip-danger')
.tooltip(/*your options*/)
;
</script>
小开

对于依赖 tether.js 的 Bootstrap 4，. tooltip-Arrow 类已经替换为. tooltip.bs-tether-element-atta-[ position ]{ ... }

下面是我如何改变颜色和加厚底部箭头。对于每个添加到边框宽度的像素，我必须从“底部”位置减去一个像素。

.tooltip.bs-tether-element-attached-bottom .tooltip-inner::before, .tooltip.tooltip-bottom .tooltip-inner::before {


border-top-color: #d19b3d !important;
border-width: 10px 10px 0;
bottom: -5px;
}

你必须调整到其他位置，比如。Bs-tether-element-Attated-left 如果通过从“ left”中减去像素来提高边框宽度，你可以调整边框的右边和重新定位，等等。

小开

似乎在4号引导程序中发生了变化

如果你想改变底部放置的工具提示的颜色为红色，只需将它添加到你的 CSS 中:

.tooltip-inner {
background-color: #f00;
}


.bs-tooltip-bottom .arrow::before {
border-bottom-color: #f00;
}
小开

对于 bootstrap4，我使用了代码:

$('[data-toggle="tooltip"]').tooltip();
.tooltip-inner {
background-color: #f00 !important;
color: #f00 ;
}
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
border-top-color: #f00 !important;
}


.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
border-right-color: #f00 !important;
}




.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
border-bottom-color: #f00 !important;
}




.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
border-left-color: #f00 !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>






<a title="This is an example" data-toggle="tooltip">Hover me</a>

小开

它将改变 bootstrap4中工具提示的颜色，您可以使用 bottom, 在.bs-tooltip-top 中为各自添加 CSS 以代替 top

.tooltip-inner {
background-color: #00acd6 !important;
color: #fff;
}
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"]
.arrow::before {
border-top-color: #00acd6;
}
小开

奥列格的答案 https://stackoverflow.com/a/42994192/9921853是最好的。 它允许将工具提示样式应用于动态创建的元素。 然而，它并不适用于 Bootstrap 4。它应该稍微修改一下:

引导程序3:

$(document).on('inserted.bs.tooltip', function(e) {
var tooltip = $(e.target).data('bs.tooltip');
tooltip.$tip.addClass($(e.target).data('tooltip-custom-class'));
});

例子: https://www.bootply.com/UORR04ncTP

引导程序4:

$(document).on('inserted.bs.tooltip', function(e) {
var tooltip = $(e.target).data('bs.tooltip');
$(tooltip.tip).addClass($(e.target).data('tooltip-custom-class'));
});

例子: https://jsfiddle.net/nsmcan/naq530hx

完整解决方案(Bootstrap 3)

JS

$(document).on('inserted.bs.tooltip', function(e) {
var tooltip = $(e.target).data('bs.tooltip');
tooltip.$tip.addClass($(e.target).data('tooltip-custom-classes'));
});


$('body').tooltip({
selector: "[title]",
html: true
});

HTML

<h1>Test tooltip styling</h1>
<div><span title="Long-long-long tooltip doesn't fit the single line">Hover over me 1</span></div>
<div><span data-tooltip-custom-classes="tooltip-left" data-container="body" title="Example (left aligned):<br>Tooltip doesn't fit the single line, and is not a sibling">Hover over me 2</span></div>
<div><span class="text-danger" data-tooltip-custom-classes="tooltip-large tooltip-left tooltip-danger" title="Example (left aligned):<br>This long text we want to have in the single line">Hover over me 3</span></div>

CSS

.tooltip.tooltip-large > .tooltip-inner {
max-width: 300px;
}
.tooltip.tooltip-left > .tooltip-inner {
text-align: left;
}


.tooltip.top.tooltip-danger > .tooltip-arrow {
border-top-color: #d9534f;
}
.tooltip.top-left.tooltip-danger > .tooltip-arrow {
border-top-color: #d9534f;
}
.tooltip.top-right.tooltip-danger > .tooltip-arrow {
border-top-color:#d9534f;
}
.tooltip.right.tooltip-danger > .tooltip-arrow {
border-right-color: #d9534f;
}
.tooltip.left.tooltip-danger > .tooltip-arrow {
border-left-color: #d9534f;
}
.tooltip.bottom.tooltip-danger > .tooltip-arrow {
border-bottom-color: #d9534f;
}
.tooltip.bottom-left.tooltip-danger > .tooltip-arrow {
border-bottom-color: #d9534f;
}
.tooltip.bottom-right.tooltip-danger > .tooltip-arrow {
border-bottom-color: #d9534f;
}
.tooltip.tooltip-danger > .tooltip-inner {
background-color: #d9534f;
}
小开

对于通过 CSS 的 鞋带4版本:

如果你想改变 气球的背景色:

/* change style balloon */
.tooltip-inner {
background-color: green !important;
color: #fff;
}

如果要在 底部位置中显示时更改箭头:

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

希望能帮到你

小开

这招对我很管用。

.tooltip .arrow:before {
border-top-color: #008ec3 !important;
}


.tooltip .tooltip-inner {
background-color: #008ec3;
}
小开

在 BS4项目中，如果您能够编译 SASS 代码，那么您可以利用创建一个 Mixin 来从任何方向管理工具提示的配色方案。

这种方法的好处:

  • 您不必为涉及样式的内容添加额外的 javaScript/jQuery。
  • 你利用 SASS 为你动态处理品牌。
  • 您可以 很容易控制哪些工具提示有哪些颜色和方向。

下面是实现这一点的许多方法之一:

创建原始混合文件:

  • 为颜色提供一个变量
  • 设置2个参数(一个用于工具提示的自定义类名，另一个用于颜色)。我还为这些参数添加了默认值(可选)。

  • 创建一个列表，并循环它，以涵盖所有4个可能的方向

    //define a color
$m-color-blue: #004c97;


//create a mixin with parameters and default value
@mixin m-tooltip-color-direction($name:'.mtootltip', $color:$m-color-blue) {


//reference your custom class name
#{$name} {
.tooltip-inner {
background-color: $color;
}


//create a list of possible directions
$directions: top bottom left right;


//loop through the list
@each $direction in $directions {
&.bs-tooltip-#{$direction} .arrow:before,
.bs-tooltip-auto[x-placement^="$direction"] .arrow:before {
border-#{$direction}-color: $color !important;
}
}
}
}


调用 Mixin (调整类名和颜色)

  • 在 main.scss 文件中，像下面这样调用 Mixin:

    @include m-tooltip-color-direction('.mtooltip', $m-color-blue);


Set your BS4 Tooltip in your layout (adjust direction)

  • Finally, add a BS4 tooltip to your layout, and give it a custom class for flexibility. This BS4 resource talks about using template as an option. We'll be using that to add our custom class.

  • The following example adds a tooltip on an info icon badge:

     <span class="badge badge-pill badge-primary" data-toggle="tooltip" data-placement="right" data-html="true" data-template="<div class='tooltip mtooltip' role='tooltip'><div class='arrow'></div><div class='tooltip-inner'></div></div>" title="<h1 class='text-white'>Tooltip</h1> on bottom">i</span>


With this setup you can adjust the class name, color and direction of your tooltip without touching your original mixin. How cool is that :)

Hope this helps!

小开

BootStrap4

当使用 BootStrap4时，工具提示会附加到 body 标记的底部。如果您的工具提示是另一个标记的子标记，则无法使用 css 来定位该工具提示。我发现唯一可行的方法是使用 insert ted.bs.tooltip 事件并向内部 div 和箭头添加一个类。然后你可以在 css 中定位这个类。

// initialize tooltips
$('[data-toggle="tooltip"]').tooltip();


// Add the classes to the toolip when it is created
$('[data-toggle="tooltip"]').on('inserted.bs.tooltip',function () {
var thisClass = $(this).attr("class");
$('.tooltip-inner').addClass(thisClass);
$('.arrow').addClass(thisClass + "-arrow");
});
/* style the tooltip box and arrow based on your class*/
.bs-tooltip-left .redTip {
background-color: red !important
}
.bs-tooltip-left .redTip-arrow::before {
border-left-color: red !important
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<p>Show a red tooltip <a href="#" class="redTip" data-toggle="tooltip" data-placement="left" title="You Did It!">Hover over me</a></p>

小开

这才是真正的解决方案

^ _ ^ 

.tooltip {
font-family: inherit;
}
.tooltip-inner {
background-color: #5264e9;
}
.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
border-bottom-color: #5264e9;
}
小开

下面是一段 SCSS 代码(下面是经过编译的 css) ，它可以帮助你轻松地控制工具提示的颜色，包括箭头(箭头的边框和背景) :

注意: 为了让 CSS 规则生效，您可能需要在某些地方添加“ important”。 注意 # 2: 这里的样式只适用于 TOP 和 BOTTOM 工具提示布局。随意添加一些更多的样式(& 。Bs- 工具提示-左边，& 。工具提示权等)

SCSS :

$tt-text-color: lime;
$tt-border-color: lime;
$tt-bg-color: black;
$arrow-border-color: lime;
$arrow-bg-color: black;


.tooltip {
.tooltip-inner {
background: $tt-bg-color;
color: $tt-text-color;
border: 2px solid $tt-border-color;
}
.arrow {
width: 11px;
height: 11px;
border: 2px solid $arrow-border-color;
bottom: 1px;
&:before {
width: 11px;
height: 11px;
background: $arrow-bg-color;
border: 0;
}
}
&.bs-tooltip-top {
.arrow {
transform: rotate(-135deg);
}
}
&.bs-tooltip-bottom {
.arrow {
transform: rotate(135deg);
top: 2px;
}
}
}

CSS :

.tooltip .tooltip-inner {
background: black;
color: lime;
border: 2px solid lime;
}
.tooltip .arrow {
width: 11px;
height: 11px;
border: 2px solid lime;
bottom: 1px;
}
.tooltip .arrow:before {
width: 11px;
height: 11px;
background: black;
border: 0;
}
.tooltip.bs-tooltip-top .arrow {
transform: rotate(-135deg);
}
.tooltip.bs-tooltip-bottom .arrow {
transform: rotate(135deg);
top: 2px;
}

示例:

jQuery(document).ready(function(){
$('a').tooltip();
});
.tooltip .tooltip-inner {
background: black;
color: lime;
border: 2px solid lime;
}
.tooltip .arrow {
width: 11px!important;
height: 11px!important;
border: 2px solid lime;
bottom: 1px;
}
.tooltip .arrow:before {
width: 11px;
height: 11px;
background: black;
border: 0;
}
.tooltip.bs-tooltip-top .arrow {
transform: rotate(-135deg);
}
.tooltip.bs-tooltip-bottom .arrow {
transform: rotate(135deg);
top: 2px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>


<div class="text-center py-4">
<a class="cn-box big cn-copy" data-toggle="tooltip" data-placement="bottom" title="Hello There">
try me
</a>
</div>

小开

如果您想自定义工具提示为白色背景和黑色文本，我们可以通过这一点。这里我们使用带锚标记的工具提示

<div id='container-light' class='tooltip-light'>
<a href="#" data-container='#container-light' data-toggle="tooltip" title="Tooltip text">Hover
over me</a>
小开

在 Bootstrap 3(未在4中测试)中，您可以在创建工具提示时使用模板覆盖默认颜色。使用此方法，您可以指定工具提示颜色运行时:

var bgColor = '#dd0000'; //red
var textColor = '#ffffff'; //white


$('#yourControlId').tooltip({
placement: "top",
template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow" style="border-top-color:' + bgColor + ';"></div><div class="tooltip-inner" style="background-color:' + bgColor + ';color:' + textColor + ';"></div></div>'
});

该模板基于原始的工具提示模板。我只添加了颜色样式。 由于箭头样式的原因，放置必须在顶部。(我还没有尝试其他放置类型)

小开

以上的答案在 Bootstrap v5.1.1中都不适用。我把一些破碎的解决方案放在一起，得到了下面这个纯 CSS 的工作解决方案:

.tooltip-inner {
background-color: red !important; /* Set box color to red */
color: black !important; /* Set text color to black */
}


.tooltip.bs-tooltip-top .tooltip-arrow::before {
border-top-color: red; /* Set arrow color to red */
}


.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
border-bottom-color: red; /* Set arrow color to red */
}


.tooltip.bs-tooltip-start .tooltip-arrow::before {
border-left-color: red; /* Set arrow color to red */
}


.tooltip.bs-tooltip-end .tooltip-arrow::before {
border-right-color: red; /* Set arrow color to red */
}
小开

所有的答案对我来说都不起作用，但是为了以防有人仍然需要一个答案，这个可能会有帮助，因为这个对我起作用(我使用 bootstrap 5)。

.tooltip-inner {
background-color: #7575FF !important;
color: #7575FF;
box-shadow: 0px 0px 4px black;
opacity: 1 !important;
}
.bs-tooltip-end .tooltip-arrow::before{
border-right-color: #7575FF !important;
}
.bs-tooltip-bottom .tooltip-arrow::before{
border-bottom-color: #7575FF !important;
}
.bs-tooltip-start .tooltip-arrow::before{
border-left-color: #7575FF !important;
}
.bs-tooltip-top .tooltip-arrow::before{
border-top-color: #7575FF !important;
}
小开

BOOTSTRP 5 :

这是 Bootstrap 生成的 HTML 标记，如文档所示:

<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
Some tooltip text!
</div>
</div>

要更改样式，您需要像下面这样更改这些类的属性:

主箱:

.tooltip-inner {
background: rgba(#333, 0.95);
color: #ddd;
}

箭头:

.bs-tooltip-end > .tooltip-arrow::before {
border-right-color: rgba(#333, 0.95);
}


.bs-tooltip-top > .tooltip-arrow::before {
border-top-color: rgba(#333, 0.95);
}


.bs-tooltip-start > .tooltip-arrow::before {
border-left-color: rgba(#333, 0.95);
}


.bs-tooltip-bottom > .tooltip-arrow::before {
border-bottom-color: rgba(#333, 0.95);
}
小开

自从 Bootstrap 5.2以来，工具提示可以通过 CSS 变量进行配置。

new bootstrap.Tooltip(document.querySelector('[data-bs-toggle="tooltip"]'));
// initialize tooltip
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<style>
.tooltip-success {
--bs-tooltip-bg: var(--bs-success); /* or hardcode any color */
}
</style>
<button type="button" class="btn btn-success" data-bs-toggle="tooltip"
data-bs-custom-class="tooltip-success"
data-bs-title="Some tooltip title" data-bs-placement="bottom">
Success tooltip
</button>

小开

为了5号鞋带 工具提示代码

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl, {
'customClass': 'custom-tooltip',
})
})
.custom-tooltip .tooltip-inner {
background-color: #2f4fff;
text-align: left;
max-width: 500px;
}


.custom-tooltip.bs-tooltip-top .tooltip-arrow::before,
.custom-tooltip.bs-tooltip-auto[x-placement^="top"] .tooltip-arrow::before {
border-top-color: #2f4fff !important;
}


.custom-tooltip.bs-tooltip-end .tooltip-arrow::before,
.custom-tooltip.bs-tooltip-auto[x-placement^="end"] .tooltip-arrow::before {
border-right-color: #2f4fff !important;
}


.custom-tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.custom-tooltip.bs-tooltip-auto[x-placement^="bottom"] .tooltip-arrow::before {
border-bottom-color: #2f4fff !important;
}


.custom-tooltip.bs-tooltip-start .tooltip-arrow::before,
.custom-tooltip.bs-tooltip-auto[x-placement^="start"] .tooltip-arrow::before {
border-left-color: #2f4fff !important;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.css" rel="stylesheet"/>
<div class="m-5 container">




<span data-bs-toggle="tooltip" data-bs-placement="auto" data-bs-html="true" title="The tooltip text<br/>Extra text">
[Custom]
</span>


</div>

小开

鞋带5

.tooltip-inner{
background-color: #fff !important;
color: #666 !important;
border: 1px solid #ddd;
}
.bs-tooltip-end .tooltip-arrow::before{
border-right-color: #ddd !important;
}
.bs-tooltip-bottom .tooltip-arrow::before{
border-bottom-color: #ddd !important;
}
.bs-tooltip-start .tooltip-arrow::before{
border-left-color: #ddd !important;
}
.bs-tooltip-top .tooltip-arrow::before{
border-top-color: #ddd !important;
}
小开

这对我在 Bootstrap 5中很有用:

.tooltip .tooltip-inner {
--bs-tooltip-bg: #4d8bb7;
}
.tooltip .tooltip-arrow::before {
--bs-tooltip-bg: #4d8bb7;
}

提交答案