logo标签列表

更改Bootstrap工具提示颜色

htmlcsstwitter-bootstrap
160
我想要做的是将工具提示颜色更改为红色。但是，我还想有其他颜色，因此我不想仅替换原始工具提示的颜色。
我应该如何处理？
可能是Styling the arrow on bootstrap tooltips的重复问题。 - vishnu
1
看看这个答案：https://dev59.com/MGUp5IYBdhLWcg3wRWFD#38279489. 为了给每个箭头设置样式，我们必须使用CSS属性选择器选择每个箭头并对它们进行单独的样式设置。 - vishnu
为每个工具提示自定义样式 我在这里发布了一个相当简单的解决方案... - George
40个回答
214

你可以使用以下方式：

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

在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: 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>

4
肯定仍然是黑色箭头。你还需要使用“.red-tooltip + .tooltip > .tooltip-arrow {background-color: #f00;}”来更改颜色。 - Fizzix
1
天啊！我的错！！已修复。@codesnooker 没看到你提到了箭头！！真的很抱歉！！ - Praveen Kumar Purushothaman
4
针对最新版本的Bootstrap，你可能需要执行以下操作来消除黑色箭头：.red-tooltip + .tooltip.top > .tooltip-arrow {background-color: #f00;}。 - Moein
4
如果您将提示框的 container 选项保持默认，那么这个解决方案很好。但是，如果您将 container: "body"，以便提示框不会因为溢出而被剪裁，这将会破坏 CSS 选择器。 - Slight
1
@PraveenKumar 你的答案/代码片段今天对我很有帮助;-) 我遇到了一个类似的问题，无法解决，所以我想我会“谷歌”一下，就这样。干杯 - Funk Forty Niner
显示剩余14条评论
116

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/

更新：Bootstrap 3

在Bootstrap 3中，您必须具体说明提示框的方向。例如：

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

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

小提琴不起作用，我看不到插入符号随着这段代码而改变。 - Don
@Don，Github 上的 CSS 和 JS 引用已经失效了；现在更新为使用 Bootstrap CDN（遗留版本）。 - technoTarek
这些对我都没用，但是Tuyen的解决方案有效。 - Tillito
@technoTarek，左侧、右侧和顶部的位置存在问题。请检查编辑后的jsFiddle。 - Anurag
@technoTarek 感谢您的更新。原来我使用了旧版的fiddle...我的错。现在它完美地运行了。再次感谢您提供的解决方案 :) - Anurag
显示剩余2条评论
68

对我起作用的唯一方法：

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

1
在所有工具提示的位置上，唯一有效的解决方案就是这个 :)。谢谢！ - Anurag
应该是被接受的答案。如果您能添加一个jsFiddle，它将有助于读者。 - Anurag
对于一个更简单的版本，您可以将以下内容添加到您的CSS样式表中 -> tooltip-inner { background-color: #773e6e !important; } .bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: #773e6e !important; } - Ani
3
好的，明白了。但箭头还是黑色的，不能改变它。 - matasoy
要更改箭头，只需添加以下内容： .bs-tooltip-top .arrow::before，.bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color: #00acd6 !important; }/* 在x-placement^之后根据您的个人情况使用top/bottom/left/right */ - CodeTrek
37

对于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>

演示运行良好，但在.tooltip-inner中，您将背景颜色设置为与颜色相同。 - iteam
13

这是Bootstrap中的工具提示代码...

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

箭头颜色可以使用这个：

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

请注意，从Bootstrap 4开始，您可以在Bootstrap Sass变量文件中直接自定义这些样式，因此您可以在_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构建工具。

您也可以使用bootstrap 3来设置颜色，使用$tooltip-color、$tooltip-bg和$tooltip-arrow-color。 - Woraphot Chokratanasombat
太棒了！这真是救命稻草 :-) - Anoop Nair
9

这对我有用。

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

.tooltip .tooltip-inner {
    background-color: #008ec3;
}
1
没有其他解决方案适用于我。但是，你的解决方案适用于我。谢谢！：））） - Lim
谢谢。除了箭头颜色之外，Bootstrap 5 对我来说很有效。对此有什么想法吗？ - morja
由于工具提示可以在我的情况下出现在顶部和底部（在你的情况下可能还有左侧和右侧，所以你需要进一步修改代码），我将CSS更改为：`.tooltip .arrow:before { border-top-color:#008EC3 !important; }.tooltip .arrow:before { border-bottom-color:#008EC3 !important; }.tooltip .tooltip-inner { background-color:#008EC3; }` - fcunited
8

my jQuery fix:

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');
});
但箭头属性没有受到影响，如何改变箭头颜色？ - Ali
6

以上的答案都不能在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，谢谢！ - Niksr
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接