html - 更改引导工具提示颜色

Question

我想要做的是将工具提示颜色更改为红色。但是，我还希望有多种其他颜色，所以我不想简单地替换原始工具提示的颜色。

我该怎么做呢？

score 201 · Accepted Answer

你可以这样使用：

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

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

score 115 · Accepted Answer

引导程序 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;
}

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

score 67 · Accepted Answer

为我工作的唯一方法：

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

score 35 · Accepted Answer

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

score 13 · Accepted Answer

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

score 10 · Accepted Answer

对于箭头颜色，您可以使用：

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

score 10 · Accepted Answer

需要注意的是，从 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 构建工具进行编译。

score 8 · Accepted Answer

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

score 7 · Accepted Answer

这对我有用。

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

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

score 4 · Accepted Answer

您可以使用它来解决您的问题。我在我的项目中检查了它，它工作正常。

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

score 4 · Accepted Answer

这已经得到了正确的回答，但我想我也应该给出我的意见。就像 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;}

score 3 · Accepted Answer

在的情况下，以上答案都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>

score 3 · Accepted Answer

似乎在 Bootstrap 4 中发生了变化

如果您想将底部工具提示的颜色更改为红色，只需将其添加到您的 CSS 中：

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

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

score 3 · Accepted Answer

引导带 4

使用 BootStrap 4 时，工具提示会附加到 body 标记的底部。如果您的工具提示是另一个标签的子标签，则无法使用 css 定位工具提示。我发现可行的唯一方法是使用 Inserted.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>

score 3 · Accepted Answer

在 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 */
}

score 2 · Accepted Answer

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

您可以在此答案中找到此代码以及小提琴、示例和更多解释：https ://stackoverflow.com/a/20880312/207661

score 2 · Accepted Answer

你可以这样使用：

在 CSS 中：

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

score 2 · Accepted Answer

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

.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 ...'它不起作用（引导程序3）。
如果有人知道如何处理？！？

score 2 · Accepted Answer

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

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

score 2 · Accepted Answer

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

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

score 2 · Accepted Answer

这是一个 SCSS 代码（下面是编译的 css），它将帮助您轻松控制工具提示颜色，包括箭头（箭头的边框和背景）：

注意：您可能需要在某些地方添加“重要”才能使 CSS 规则生效。注意 #2：此处的样式仅适用于 TOP 和 BOTTOM 工具提示布局。随意添加更多样式（&.bs-tooltip-left、&.bs-tooltip-right 等）

社会保障体系：

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

score 2 · Accepted Answer

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

该模板基于原始工具提示模板。我只添加了颜色样式。由于箭头样式，该位置必须在顶部。（我没有尝试过其他展示位置类型）

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

它将更改 bootstrap4 中工具提示的颜色，您可以使用底部、左侧、右侧添加 CSS 来代替 .bs-tooltip-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;
}

score 0 · Accepted Answer

0

为我工作的唯一方法：

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

于 2015-04-24T12:51:46.823 回答

score 0 · Accepted Answer

我们在我们的网站上使用 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;
  }

HTML

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

我正在添加这个答案，以防其他人处于与我类似的情况。

score 0 · Accepted Answer

当我想更改引导工具提示的背景颜色时，这种简单的方法对我有用：

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

jsfiddle 现场演示

注一：

如果 js代码 include.data('tooltip')不适合您，请注释其行并取消注释 js代码 include .data('bs-tooltip')。

注乙：

如果您的引导工具提示功能将工具提示添加到正文的末尾（不是在元素之后），我的解决方案仍然可以很好地工作，但此页面中的其他一些答案在这种情况下不像@Praveen Kumar和@technoTarek那样工作。

注释 C：

此代码支持工具提示 ( , , , )tooltip arrow的所有位置的颜色。topbottomleftright

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

对于依赖于 tether.js 的 Bootstrap 4， .tooltip-arrow 类已被替换为 .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，您将调整右边框，如果通过从“左”中减去像素等来提高边框宽度，则重新定位。

score 0 · Accepted Answer

奥列格的回答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

完整解决方案（引导程序 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;
}

score 0 · Accepted Answer

对于通过 CSS的Bootstrap 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;
}

希望能帮到你

score 0 · Accepted Answer

在您的 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（调整类名和颜色）

在你的主 .scss 文件中调用你的 mixin，如下所示：

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

在布局中设置 BS4 工具提示（调整方向）

最后，为您的布局添加一个 BS4 工具提示，并为其提供一个自定义类以提高灵活性。这个BS4 资源讨论了使用模板作为选项。我们将使用它来添加我们的自定义类。

以下示例在信息图标徽章上添加工具提示：

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

使用此设置，您可以调整工具提示的类名称、颜色和方向，而无需触及原始 mixin。多么酷啊：）

希望这可以帮助！

score 0 · Accepted Answer

这是真正的解决方案

^_^

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

score 0 · Accepted Answer

所有答案都不适合我，但以防万一有人仍然需要答案，这可能会有所帮助，因为这对我有用（我正在使用引导程序 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;
}

score -1 · Accepted Answer

如果您想将工具提示自定义为带有黑色文本的白色背景，我们可以通过此操作。这里我们使用带有锚标签的工具提示

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

html - 更改引导工具提示颜色

35 回答 35

这种方法的好处：

创建您的原始混合：

调用你的 mixin（调整类名和颜色）

在布局中设置 BS4 工具提示（调整方向）

Related

Reference