根据位置修改 Twitter Bootstrap 的工具提示颜色

Question

我正在尝试为工具提示输出各种颜色（编辑：来自 Twitter Bootstrap），但我似乎不太明白。更改默认颜色并不难，只需更改 .tooltip 及其相关定义的颜色即可。

但假设我想更改正文中特定工具提示的颜色

<div id="users" class="row">
    <div id="photo_stack" class="span6 photo_stack">
        <img id="photo1" src="" width="400px" height="300px" alt="" rel="tooltip" data-placement="right" title="Other Color" />

一个简单的方法，比如

#users .tooltip { background-color: #somecolor; }

似乎不起作用。我想这与 DOM 有关，我需要将某种类附加到特定的工具提示中？还是我完全关闭了？谢谢:)

这是一个 JSFiddle：http://jsfiddle.net/rZxrm/

Answer 1

查看我对类似问题的回复：Change bootstrap tooltip color

它适用于现有和动态创建的元素的样式工具提示，使用 Bootstrap 3 或 Bootstrap 4。

Bootstrap 3:

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

示例：
for Bootstrap 3
for Bootstrap 4

Answer 2

我为您的问题找到了另一种解决方案（我试图做同样的事情）。只需更改主 CSS 样式表中的颜色（只要您的样式表在文档头部的 bootstrap 之后列出，它就会覆盖 bootstrap 的颜色）。

具体来说，这是您添加到主样式表中的内容（例如）：

.tooltip-inner {
  background-color: #D13127;
  color: #fff;
}

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

Answer 3

如果您使用工具提示，您可能希望使用内置主题颜色，即信息、成功、危险和警告。然而，Bootstrap 不支持工具提示的主题（在撰写本文时为 V3），但我们可以添加几行 CSS 来实现这一点。

理想情况下，我们想要的是一组类 tooltip-info、tooltip-danger、tooltip-success 等，您可以将它们应用于您正在调用的元素 tooltip()。我将在下面给出完全符合此要求的代码，并使用 Bootstrap 3.0 进行测试。

结果

它是如何工作的

下面的代码基本上重用了警报组件的样式，因为它与工具提示非常相似。请注意，这样做几乎没有什么好处，包括不仅背景颜色会发生变化，而且文本颜色和边框颜色也会发生变化。此外，它使工具提示具有略微透明的光泽外观。工具提示中的箭头取决于边框颜色，因此可以通过继承警报组件的边框颜色来单独更改。

另请注意，这些不是全局更改。除非你应用像 tooltip-info 这样的类，否则你会得到默认的工具提示。

用法

<span class="tooltip-info"  title="Hello, I'm dangerous">
    Hover here to see tooltip!
</span>

请注意，默认情况下不激活引导工具提示，因此您需要像这样激活（请参阅https://stackoverflow.com/a/20877657/207661）

$(document.body).tooltip({ selector: "[title]" });

小提琴

在此处使用此代码：http://jsbin.com/usIyoGUD/3/edit?html,css,output

较少的 CSS 源代码

//Import these from your own Bootstrap folder
@import  "js/ext/bootstrap/less/mixins.less";
@import  "js/ext/bootstrap/less/variables.less";

.tooltip-border-styles(@borderColor) {
    & + .tooltip {
        &.top .tooltip-arrow,
        &.top-left .tooltip-arrow,
        &.top-right .tooltip-arrow {
            border-top-color: @borderColor;
        }
        &.bottom .tooltip-arrow,
        &.bottom-left .tooltip-arrow,
        &.bottom-right .tooltip-arrow {
            border-bottom-color: @borderColor;
        }
        &.right .tooltip-arrow {
            border-right-color: @borderColor;
        }
        &.left .tooltip-arrow {
            border-left-color: @borderColor;
        }
    }
}

.tooltip-info {
  & + .tooltip .tooltip-inner {
    .alert-info;
  }
  .tooltip-border-styles(@alert-info-border);
}
.tooltip-danger {
  & + .tooltip .tooltip-inner {
    .alert-danger;
  }
  .tooltip-border-styles(@alert-danger-border);
}
.tooltip-warning {
  & + .tooltip .tooltip-inner {
    .alert-warning;
  }
  .tooltip-border-styles(@alert-warning-border);
}
.tooltip-success {
  & + .tooltip .tooltip-inner {
    .alert-success;
  }
  .tooltip-border-styles(@alert-success-border);
}

编译的 CSS

如果你不使用 LESS 或者不想处理它，那么你可以直接使用下面编译的 CSS：

.tooltip-info + .tooltip .tooltip-inner {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
  background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
  background-image: linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%);
  background-repeat: repeat-x;
  border-color: #9acfea;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
}
.tooltip-info + .tooltip.top .tooltip-arrow,
.tooltip-info + .tooltip.top-left .tooltip-arrow,
.tooltip-info + .tooltip.top-right .tooltip-arrow {
  border-top-color: #bce8f1;
}
.tooltip-info + .tooltip.bottom .tooltip-arrow,
.tooltip-info + .tooltip.bottom-left .tooltip-arrow,
.tooltip-info + .tooltip.bottom-right .tooltip-arrow {
  border-bottom-color: #bce8f1;
}
.tooltip-info + .tooltip.right .tooltip-arrow {
  border-right-color: #bce8f1;
}
.tooltip-info + .tooltip.left .tooltip-arrow {
  border-left-color: #bce8f1;
}
.tooltip-danger + .tooltip .tooltip-inner {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
  background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
  background-image: linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%);
  background-repeat: repeat-x;
  border-color: #dca7a7;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
}
.tooltip-danger + .tooltip.top .tooltip-arrow,
.tooltip-danger + .tooltip.top-left .tooltip-arrow,
.tooltip-danger + .tooltip.top-right .tooltip-arrow {
  border-top-color: #ebccd1;
}
.tooltip-danger + .tooltip.bottom .tooltip-arrow,
.tooltip-danger + .tooltip.bottom-left .tooltip-arrow,
.tooltip-danger + .tooltip.bottom-right .tooltip-arrow {
  border-bottom-color: #ebccd1;
}
.tooltip-danger + .tooltip.right .tooltip-arrow {
  border-right-color: #ebccd1;
}
.tooltip-danger + .tooltip.left .tooltip-arrow {
  border-left-color: #ebccd1;
}
.tooltip-warning + .tooltip .tooltip-inner {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
  background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
  background-image: linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%);
  background-repeat: repeat-x;
  border-color: #f5e79e;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);
}
.tooltip-warning + .tooltip.top .tooltip-arrow,
.tooltip-warning + .tooltip.top-left .tooltip-arrow,
.tooltip-warning + .tooltip.top-right .tooltip-arrow {
  border-top-color: #faebcc;
}
.tooltip-warning + .tooltip.bottom .tooltip-arrow,
.tooltip-warning + .tooltip.bottom-left .tooltip-arrow,
.tooltip-warning + .tooltip.bottom-right .tooltip-arrow {
  border-bottom-color: #faebcc;
}
.tooltip-warning + .tooltip.right .tooltip-arrow {
  border-right-color: #faebcc;
}
.tooltip-warning + .tooltip.left .tooltip-arrow {
  border-left-color: #faebcc;
}
.tooltip-success + .tooltip .tooltip-inner {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
  background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
  background-image: linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
  background-repeat: repeat-x;
  border-color: #b2dba1;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
}
.tooltip-success + .tooltip.top .tooltip-arrow,
.tooltip-success + .tooltip.top-left .tooltip-arrow,
.tooltip-success + .tooltip.top-right .tooltip-arrow {
  border-top-color: #d6e9c6;
}
.tooltip-success + .tooltip.bottom .tooltip-arrow,
.tooltip-success + .tooltip.bottom-left .tooltip-arrow,
.tooltip-success + .tooltip.bottom-right .tooltip-arrow {
  border-bottom-color: #d6e9c6;
}
.tooltip-success + .tooltip.right .tooltip-arrow {
  border-right-color: #d6e9c6;
}
.tooltip-success + .tooltip.left .tooltip-arrow {
  border-left-color: #d6e9c6;
}

Answer 4

这是我在 sass 中的做法

  .tooltip-inner
    color: #fff
    background-color: #111
    border: 1px solid #fff

  .tooltip.in
    opacity: .9

以及位置依赖部分

  .tooltip.bottom .tooltip-arrow
    border-bottom-color: #fff

Answer 5

见Dynamically add a class to Bootstrap's 'popover' container

她的修复允许通过一行修改 bootstrap.js 来实现数据类选择器

Answer 6

Twitter bootstrap 没有内置此功能，但您可以添加自己的函数来执行此操作，如下所示：

$('#photo1').hover(function() {$('.tooltip').addClass('tooltipPhoto')}, function () {$('.tooltip').removeClass('tooltipPhoto')});​

然后您只需在 CSS 中定义 tooltipPhoto 类以具有不同的背景颜色。

编辑： 更新解决方案：

function changeTooltipColorTo(color) {
    $('.tooltip-inner').css('background-color', color)
    $('.tooltip.top .tooltip-arrow').css('border-top-color', color);
    $('.tooltip.right .tooltip-arrow').css('border-right-color', color);
    $('.tooltip.left .tooltip-arrow').css('border-left-color', color);
    $('.tooltip.bottom .tooltip-arrow').css('border-bottom-color', color);
}

$(document).ready(function () {
    $("[rel=tooltip]").tooltip();
    $('#photo1').hover(function() {changeTooltipColorTo('#f00')});
    $('#photo2').hover(function() {changeTooltipColorTo('#0f0')});
    $('#photo3').hover(function() {changeTooltipColorTo('#00f')});
});