Javascript 根据位置修改 Twitter Bootstrap 的工具提示颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12639708/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Modifying Twitter Bootstrap's Tooltip Colors Based on Position
提问by Simon
I am trying to output various colors for the tooltips (edit: from Twitter Bootstrap) but it seems I'm not quite getting it. Just changing the default color hasn't been hard, it's just a matter of changing the colors for .tooltip and its associated definitions.
我正在尝试为工具提示输出各种颜色（编辑：来自 Twitter Bootstrap），但似乎我不太明白。更改默认颜色并不难，只需更改 .tooltip 及其相关定义的颜色即可。
However assuming I wanted to change the color for a specific tooltip within the body
但是，假设我想更改正文中特定工具提示的颜色
<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" />
A simple approach like
一个简单的方法，如
#users .tooltip { background-color: #somecolor; }
doesn't seem to work. I guess it's something about the DOM and I'd need to attach some sort of classes to the specific tooltips? Or am I completely off? Thanks :)
似乎不起作用。我想这是关于 DOM 的，我需要将某种类附加到特定的工具提示？还是我完全没了？谢谢 ：）
Here's a JSFiddle: http://jsfiddle.net/rZxrm/
这是一个 JSFiddle：http: //jsfiddle.net/rZxrm/
采纳答案by Miha Rekar
Twitter bootstrap does not have this feature built in, but you could add your own functions to do this, like so:
Twitter bootstrap 没有内置此功能，但您可以添加自己的函数来执行此操作，如下所示：
$('#photo1').hover(function() {$('.tooltip').addClass('tooltipPhoto')}, function () {$('.tooltip').removeClass('tooltipPhoto')});?
and then you just have to define tooltipPhotoclass in CSS to have a different background color.
然后你只需要tooltipPhoto在 CSS 中定义类以获得不同的背景颜色。
EDIT: Updated solution:
编辑：更新的解决方案：
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')});
});
回答by Shital Shah
If you are using tooltip, you might want to use built-in theme colors which are info, success, danger and warning. However Bootstrap does not have support for themes for tooltips (in V3 at the time of writing) but we can add few lines of CSS to achieve this.
如果您正在使用工具提示，您可能希望使用内置的主题颜色，即信息、成功、危险和警告。然而，Bootstrap 不支持工具提示的主题（在撰写本文时在 V3 中），但我们可以添加几行 CSS 来实现这一点。
Ideally what we want is set of classes tooltip-info, tooltip-danger, tooltip-successetc that you can apply to element you are invoking tooltip(). I'll give code below that does exactly this and is tested with Bootstrap 3.0.
理想情况下，我们要的是一组类是什么tooltip-info，tooltip-danger，tooltip-success等，你可以应用到你正在调用元素tooltip()。我将在下面给出完全执行此操作的代码，并使用 Bootstrap 3.0 进行测试。
Result
结果
How does it work
它是如何工作的
Below code basically reuses styles for alert component as it is very similar to tooltip. Notice that doing so has few advantages including the fact that not only background color is changes but text color as well as border color is changed too. Plus it gives the tooltip slightly transparent glossy look. The arrow in the tooltip depends on border color so that is changed separately by inheriting alert component's border color.
下面的代码基本上重用了警报组件的样式，因为它与工具提示非常相似。请注意，这样做的好处很少，包括不仅背景颜色发生变化，而且文本颜色和边框颜色也发生了变化。此外，它使工具提示具有略微透明的光泽外观。工具提示中的箭头取决于边框颜色，因此可以通过继承警报组件的边框颜色单独更改。
Also note that these are not global changes. Unless you apply classes like tooltip-infoyou get the default tooltip.
另请注意，这些不是全局更改。除非您像tooltip-info获得默认工具提示一样应用类。
Usage
用法
<span class="tooltip-info" title="Hello, I'm dangerous">
Hover here to see tooltip!
</span>
Note that Bootstrap tooltips are not activated by default so you need activation like this (see https://stackoverflow.com/a/20877657/207661)
请注意，Bootstrap 工具提示默认未激活，因此您需要像这样激活（请参阅https://stackoverflow.com/a/20877657/207661）
$(document.body).tooltip({ selector: "[title]" });
Fiddle
小提琴
Play with this code here: http://jsbin.com/usIyoGUD/3/edit?html,css,output
在这里玩这个代码：http: //jsbin.com/usIyoGUD/3/edit?html,css,output
LESS CSS Source
更少的 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);
}
Compiled CSS
编译的 CSS
If you are not using LESS or don't want to deal with it then you can use below compiled CSS directly:
如果你不使用 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;
}
回答by Liz Goncalves
I have found another solution for your problem (I was trying to do the same thing). Simply change the color in your main CSS stylesheet (it will override bootstrap's as long as your stylesheet is listed after bootstrap in the head of your doc).
我为您的问题找到了另一种解决方案（我试图做同样的事情）。只需更改主 CSS 样式表中的颜色（只要您的样式表在文档头部的 bootstrap 之后列出，它就会覆盖 bootstrap 的颜色）。
Specifically here's what you add to your main stylesheet (as an example):
具体来说，这是您添加到主样式表的内容（例如）：
.tooltip-inner {
background-color: #D13127;
color: #fff;
}
.tooltip.top .tooltip-arrow {
border-top-color: #D13127;
}
回答by Peter Ehrlich
See Dynamically add a class to Bootstrap's 'popover' container
请参见将类动态添加到 Bootstrap 的“popover”容器
Her fix allows a data-class selector by modifying bootstrap.js with one line
她的修复允许通过一行修改 bootstrap.js 来实现数据类选择器
回答by Emanuel
Here is how I do it in sass
这是我在 sass 中的做法
.tooltip-inner
color: #fff
background-color: #111
border: 1px solid #fff
.tooltip.in
opacity: .9
And the position dependent part
和位置依赖部分
.tooltip.bottom .tooltip-arrow
border-bottom-color: #fff
回答by Sergey Nudnov
See my reply to a similar question: Change bootstrap tooltip color
查看我对类似问题的回复：Change bootstrap tooltip color
It is applicable to style tooltips of the existing and dynamically created elements, using Bootstrap 3 or Bootstrap 4.
它适用于使用 Bootstrap 3 或 Bootstrap 4 的现有和动态创建元素的样式工具提示。
Bootstrap 3:
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'));
});
Examples:
for Bootstrap 3
for Bootstrap 4
