更改引导工具提示颜色

【问题标题】：Change Bootstrap tooltip color更改引导工具提示颜色
【发布时间】：2013-07-14 18:39:41
【问题描述】：

我正在尝试将 tooltip 颜色更改为红色。但是，我还想要多种其他颜色，所以我不想简单地替换原始工具提示的颜色。

我该怎么做呢？

【问题讨论】：

标签： html css twitter-bootstrap


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

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

【讨论】：

  • 肯定还是一个黑色箭头。您还需要使用 .red-tooltip + .tooltip &gt; .tooltip-arrow {background-color: #f00;} 更改颜色
  • 天哪！我的错！！！固定的。 @codesnooker 没有看到您提到了 箭头！！！！真的很抱歉！！！
  • 使用最新版本的引导程序，您可能需要这样做才能摆脱黑色箭头：.red-tooltip + .tooltip.top &gt; .tooltip-arrow {background-color: #f00;}
  • 如果您将工具提示 container 选项保留为默认值，则此解决方案很好。但是，如果您制作 container: "body" 以使您的工具提示不会被剪裁为溢出，这将破坏 css 选择器。
  • @PraveenKumar 你的回答/小提琴今天对我有用 ;-) 有一个类似的问题，我想不通，所以我想我会“谷歌”，是。干杯
【解决方案2】：

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

【讨论】：

  • 小提琴不起作用，我没有看到插入符号随此代码发生变化。
  • @Don 对 css 和 js 的 github 引用不再有效；更新为使用 Bootstrap CDN（旧版）。
  • 这些都不适合我，但 Tuyen 的解决方案可以。
  • @technoTarek 左侧、右侧和顶部展示位置存在问题。检查编辑的jsFiddle
  • @Anurag 您的小提琴没有使用我提供的解决方案。这是我使用您的 html 和 js 的所有方向的解决方案，但我的 css：jsfiddle.net/technotarek/nhvvqz4v
【解决方案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="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>

【讨论】：

  • 在工具提示的所有位置上都对我有用的唯一解决方案:)。谢谢！
  • 应该是公认的答案。如果您可以添加一个 jsFiddle，这将对读者有所帮助。
  • 对于更简单的版本，您可以将其添加到您的 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; }
  • 谢谢。但是箭头还是黑的，改不了了。
【解决方案4】：

对于 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 中您已将背景颜色设置为与颜色相同。
【解决方案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;
}

【讨论】：

    【解决方案6】：

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

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

    【讨论】：

      【解决方案7】：

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

      【讨论】：

      • 您还可以使用带有 $tooltip-color、$tooltip-bg 和 $tooltip-arrow-color 的 bootstrap 3 设置颜色
      • 超级！这是一个救生员:-)
      【解决方案8】：

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

      【讨论】：

      • 但是箭头属性不受影响，如何改变箭头颜色？
      【解决方案9】：

      这对我有用。

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

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

      【讨论】：

      • 没有其他解决方案适合我。但是，您的解决方案对我有用。谢谢！ :)))
      【解决方案10】：

      在 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，谢谢！
      【解决方案11】：

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

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

      【讨论】：

        【解决方案12】：

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

        【讨论】：

          【解决方案13】：

          在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 sn-p：

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

          【讨论】：

            【解决方案14】：

            在 Bootstrap 4 中似乎发生了变化

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

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

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

            【讨论】：

              【解决方案15】：

              BootStrap 4

              使用 BootStrap 4 时，工具提示会附加到正文标记的底部。如果您的工具提示是另一个标签的子标签，则无法使用 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>

              【讨论】：

              • 这是 Bootstrap 4 的有效解决方案。提示：如果您像我一样使用工具提示触发器手册（即工具提示始终可见），请使用任何其他 html 属性，因为使用 'data- toggle' 将通过鼠标悬停触发显示/隐藏事件。
              【解决方案16】：

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

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

              【讨论】：

                【解决方案17】：

                你可以这样使用：

                在 CSS 中：

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

                【讨论】：

                  【解决方案18】：

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

                  .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）。
                  如果有人知道如何处理？！？

                  【讨论】：

                    【解决方案19】：

                    Bootstrap 3 + SASS 用于 bottom 工具提示：

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

                    【讨论】：

                      【解决方案20】：

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

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

                      【讨论】：

                        【解决方案21】：

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

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

                        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>

                        【讨论】：

                          【解决方案22】：

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

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

                          【讨论】：

                            【解决方案23】： 

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

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

                            【讨论】：

                              【解决方案24】：

                              它会改变 bootstrap4 中工具提示的颜色，你可以使用底部， left, right 分别在 .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;
}

                              【讨论】：

                              • bootstrap 4 工作，请检查 CSS 的位置。
                              • 稍微解释一下你的答案。它可以帮助别人
                              【解决方案25】：

                              对我有用的唯一方法：

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

                              【讨论】：

                                【解决方案26】：

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

                                我添加此答案以防其他人处于与我类似的情况。

                                【讨论】：

                                  【解决方案27】：

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

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

                                  注意 A：

                                  如果 js 代码包含.data('tooltip') 不适合您，请评论其行 和取消评论 js 代码包含@ 987654328@.

                                  注意 B：

                                  如果您的引导工具提示功能添加一个工具提示到正文的末尾（不是紧跟在元素之后），我的解决方案还不错但是在这种情况下，此页面中的其他一些答案不像 @Praveen Kumar 和 @technoTarek 那样起作用。

                                  注释 C：

                                  此代码在工具提示的所有位置都支持tooltip arrow 颜色（top,bottom,left,right）。

                                  【讨论】：

                                    【解决方案28】：

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

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

                                    【讨论】：

                                      【解决方案29】：

                                      对于依赖于 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，您将调整右边框，如果通过从“左”中减去像素等来提高边框宽度，则重新定位.

                                      【讨论】：

                                      • 我忽略了另一个方面：如果提高系绳元素的边框宽度，还需要使用边距样式重新定位回中心，所以要从默认的 5px 更改为 10px 边框我还必须更改默认值左边距：-5px；到左边距：-10px;
                                      【解决方案30】：

                                      Oleg 的回答 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;
}

                                      【讨论】：

                                        猜你喜欢
                                        • 1970-01-01
                                        • 1970-01-01
                                        • 1970-01-01
                                        • 1970-01-01
                                        • 1970-01-01
                                        • 2023-01-12
                                        • 1970-01-01
                                        • 1970-01-01
                                        • 1970-01-01
                                        相关资源
                                        最近更新 更多
                                        热门标签
                                        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode