更改引导工具提示颜色

我想要做的是改变工具提示颜色为红色。 但是，我也想要多种其他颜色，所以我不想简单地replace原来的提示颜色。

我怎么去做这个？

Answer 1

你可以这样使用：

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

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

Answer 2

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

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

更新：引导3

Bootstrap 3中的工具提示的方向必须具体。例如：

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

jsFiddle使用Bootstrap 3的所有工具提示方向： http : //jsfiddle.net/technotarek/L2rLE/

Answer 3

唯一的方式为我工作：

 $(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="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> 

Answer 4

对于箭头颜色，你可以使用这个：

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

Answer 5

这里是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; } 

Answer 6

你可以用这个来解决你的问题。 我检查了我的项目，它工作正常。

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

Answer 7

需要注意的是，从Bootstrap 4开始，您可以直接在Bootstrap Sassvariables文件中自定义这些样式，所以在_variables.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构build工具中进行编译。

Answer 8

如果你只是想改变颜色，你可以使用其他答案中提到的quickapproach。 但是，如果您使用Bootstrap，则应该使用主题，以使外观与感觉保持一致。 不幸的是，Bootstrap没有内置的主题支持，所以我写了一小段CSS来做这件事。 你基本上得到了tooltip-info ， tooltip-warning等类，你可以添加到元素来应用主题。

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

Answer 9

我的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'); }); 

Answer 10

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

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

但是，如果我想要添加一个类来改变颜色（像在'.class + .tooltip …'的小提琴不起作用（bootstrap 3）。
如果有人知道如何处理？！？

Answer 11

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

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

Answer 12

这已经被正确回答了，但我想我也应该发表我的看法。 像cozen说这是一个边界，为了工作，你必须指定类来格式化这个引导程序指定相同的方式。 所以，你可以做到这一点

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

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

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

Answer 13

对于箭头，首先确认您正在使用哪个方向。 例如，我正在使用left方向，那么应该是

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

Answer 14

你可以这样使用：

而在CSS中：

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

Answer 15

唯一的方式为我工作：

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

Answer 16

 $(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> 

Answer 17

我们在我们的网站上使用bootstrap 3.0，但上述步骤都没有在更新工具提示的样式工作。 但是我find了一个使用jQueryUI样式的解决scheme

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

HTML

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

如果有其他人处于和我一样的情况，我会添加这个答案。

Answer 18

这个简单的方法适用于我，当我想改变引导工具提示的背景颜色时：

 $(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="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> 

Answer 19

如果你想使用jQuery，你可以试试这个：

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

Answer 20

非以上的答案在container: 'body'情况下工作正常container: 'body' ，以下解决scheme：

 // 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> 

Answer 21

对于依赖于tether.js的Bootstrap 4，.tooltip-arrow类已被replace为.tooltip.bs-tether-element-attached- [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; } 

你必须为其他位置进行调整，即.tooltip.bs-tether-element-attached-left左边你将调整边界右边，如果通过从左边减去像素来增加边界宽度，则重新定位。