CSS 在 Bootstrap 4 中重新着色工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36143382/
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
Re-color Tooltip in Bootstrap 4
提问by Takuhii
I'm trying to re-skin/re-format a tooltip in Bootstrap 4, and the original way of doing it doesn't seem to work anymore. Currently I am doing this:
我正在尝试在 Bootstrap 4 中重新皮肤/重新格式化工具提示，而原来的做法似乎不再有效。目前我正在这样做：
.tooltip-inner {
background: #7abcff;
background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%);
background: -moz-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%);
background: linear-gradient(to bottom, #7abcff 0%,#60abf8 44%,#4096ee 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 );
color: #fff;
font-family: 'Roboto', Arial, sans-serif;
}
.tooltip.top .tooltip-arrow {
border-top-color: #7abcff;
}
.tooltip-inneris working fine, but .tooltip.top .tooltip-arrowisn't; it stays black. I am assuming .tooltip.topis the arrow on top of a bottom aligned tooltip.
.tooltip-inner工作正常，但.tooltip.top .tooltip-arrow不是；它保持黑色。我假设.tooltip.top是底部对齐的工具提示顶部的箭头。
Any help would be greatly appreciated
任何帮助将不胜感激
回答by madison
As of Bootstrap 4.0
作为 Bootstrap 4.0
CSSfor tooltiprecoloring is handled by the .tooltip-innerclass as you noticed:
如您所见，用于工具提示重新着色的CSS由.tooltip-inner该类处理：
.tooltip-inner {
max-width: 200px;
padding: 3px 8px;
color: #fff;
text-align: center;
background-color: #000;
border-radius: .25rem;
}
Css for top arrow:
顶部箭头的 CSS：
.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip.bs-tooltip-top .arrow::before {
margin-left: -3px;
content: "";
border-width: 5px 5px 0;
border-top-color: #000;
}
Css for right arrow:
右箭头的 CSS：
.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before, .tooltip.bs-tooltip-right .arrow::before {
margin-top: -3px;
content: "";
border-width: 5px 5px 5px 0;
border-right-color: #000;
}
Css for bottom arrow:
底部箭头的 CSS：
.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .tooltip.bs-tooltip-bottom .arrow::before {
margin-left: -3px;
content: "";
border-width: 0 5px 5px;
border-bottom-color: #000;
}
Css for left arrow:
左箭头的 CSS：
.tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before, .tooltip.bs-tooltip-left .arrow::before {
right: 0;
margin-top: -3px;
content: "";
border-width: 5px 0 5px 5px;
border-left-color: #000;
}
回答by Ashraful Alam
Simple use of this code in your CSS file.
在您的 CSS 文件中简单使用此代码。
.tooltip-inner {
background-color: #00cc00;
}
.tooltip.bs-tooltip-right .arrow:before {
border-right-color: #00cc00 !important;
}
.tooltip.bs-tooltip-left .arrow:before {
border-left-color: #00cc00 !important;
}
.tooltip.bs-tooltip-bottom .arrow:before {
border-bottom-color: #00cc00 !important;
}
.tooltip.bs-tooltip-top .arrow:before {
border-top-color: #00cc00 !important;
}
回答by marcelo2605
回答by Alex Glinsky
Bootstrap 4.0.0 & Popper.js
Bootstrap 4.0.0 和 Popper.js
This is the minimal code for left-sided green tooltip:
这是左侧绿色工具提示的最小代码：
.tooltip .tooltip-inner {
background-color: green;
}
.tooltip .arrow::before {
border-left-color: green;
}
Just add it to your CSS.
只需将其添加到您的 CSS 中即可。
回答by George
Using a custom style for each tooltip
为每个工具提示使用自定义样式
The BS4 solutions above work but they all change the tooltip style globally. All tooltips will look the same. It would be much sweeter to use a custom style for each tooltip, e.g. like for the alert boxes. I have no idea why the BS team did not provide that feature for tooltips off the shelf.
上面的 BS4 解决方案有效，但它们都全局更改了工具提示样式。所有工具提示看起来都一样。为每个工具提示使用自定义样式会更好，例如警报框。我不知道为什么 BS 团队没有为现成的工具提示提供该功能。
Hello, data-container
你好，数据容器
There is a rather simple solution making use of the container option that the BS tooltip provides. With this option you can append the tooltip element to another specific element. So you can wrap the tooltip into another element and append it to it via the data-container attribute like this:
利用 BS 工具提示提供的容器选项，有一个相当简单的解决方案。使用此选项，您可以将工具提示元素附加到另一个特定元素。因此，您可以将工具提示包装到另一个元素中，并通过 data-container 属性将其附加到其中，如下所示：
<span class="wrapper"><a href="#" data-toggle="tooltip" data-container=".wrapper" title="Some tooltip text!">Hover over me</a></span>
Now you can use the wrapper element to style the tooltip inside it inividually. For example, you want a tooltip in "danger" style. This would be the HTML:
现在，您可以使用包装器元素单独设置工具提示的样式。例如，您需要“危险”样式的工具提示。这将是 HTML：
<span class="tooltip-danger"><a href="#" data-toggle="tooltip" data-container=".tooltip-danger" title="Some tooltip text!">Hover over me</a></span>
And this would be the stylesheet:
这将是样式表：
.tooltip-danger .tooltip-inner {
color: #721c24;
background-color: #f8d7da;
border: 1px solid #721c24;
}
.tooltip-danger .tooltip.bs-tooltip-top .arrow:before {
border-top-color: #721c24;
}
.tooltip-danger .tooltip.bs-tooltip-right .arrow:before {
border-right-color: #721c24;
}
.tooltip-danger .tooltip.bs-tooltip-bottom .arrow:before {
border-bottom-color: #721c24;
}
.tooltip-danger .tooltip.bs-tooltip-left .arrow:before {
border-left-color: #721c24;
}
That will look like this:
看起来像这样：
Another tooltip on the same page could look like this:
同一页面上的另一个工具提示可能如下所示：
You get the idea...
你明白了...
The Stylesheet
样式表
And since I have been through it already, here are my tooltip styles based on the BS4 alert styles:
由于我已经经历过它，这里是我基于 BS4 警报样式的工具提示样式：
.tooltip-danger .tooltip-inner {
color: #721c24;
background-color: #f8d7da;
border: 1px solid #721c24;
}
.tooltip-danger .tooltip.bs-tooltip-top .arrow:before {
border-top-color: #721c24;
}
.tooltip-danger .tooltip.bs-tooltip-right .arrow:before {
border-right-color: #721c24;
}
.tooltip-danger .tooltip.bs-tooltip-bottom .arrow:before {
border-bottom-color: #721c24;
}
.tooltip-danger .tooltip.bs-tooltip-left .arrow:before {
border-left-color: #721c24;
}
.tooltip-dark .tooltip-inner {
color: #1b1e21;
background-color: #d6d8d9;
border: 1px solid #1b1e21;
}
.tooltip-dark .tooltip.bs-tooltip-top .arrow:before {
border-top-color: #1b1e21;
}
.tooltip-dark .tooltip.bs-tooltip-right .arrow:before {
border-right-color: #1b1e21;
}
.tooltip-dark .tooltip.bs-tooltip-bottom .arrow:before {
border-bottom-color: #1b1e21;
}
.tooltip-dark .tooltip.bs-tooltip-left .arrow:before {
border-left-color: #1b1e21;
}
.tooltip-info .tooltip-inner {
color: #0c5460;
background-color: #d1ecf1;
border: 1px solid #0c5460;
}
.tooltip-info .tooltip.bs-tooltip-top .arrow:before {
border-top-color: #0c5460;
}
.tooltip-info .tooltip.bs-tooltip-right .arrow:before {
border-right-color: #0c5460;
}
.tooltip-info .tooltip.bs-tooltip-bottom .arrow:before {
border-bottom-color: #0c5460;
}
.tooltip-info .tooltip.bs-tooltip-left .arrow:before {
border-left-color: #0c5460;
}
.tooltip-light .tooltip-inner {
color: #818182;
background-color: #fefefe;
border: 1px solid #818182;
}
.tooltip-light .tooltip.bs-tooltip-top .arrow:before {
border-top-color: #818182;
}
.tooltip-light .tooltip.bs-tooltip-right .arrow:before {
border-right-color: #818182;
}
.tooltip-light .tooltip.bs-tooltip-bottom .arrow:before {
border-bottom-color: #818182;
}
.tooltip-light .tooltip.bs-tooltip-left .arrow:before {
border-left-color: #818182;
}
.tooltip-primary .tooltip-inner {
color: #004085;
background-color: #cce5ff;
border: 1px solid #004085;
}
.tooltip-primary .tooltip.bs-tooltip-top .arrow:before {
border-top-color: #004085;
}
.tooltip-primary .tooltip.bs-tooltip-right .arrow:before {
border-right-color: #004085;
}
.tooltip-primary .tooltip.bs-tooltip-bottom .arrow:before {
border-bottom-color: #004085;
}
.tooltip-primary .tooltip.bs-tooltip-left .arrow:before {
border-left-color: #004085;
}
.tooltip-secondary .tooltip-inner {
color: #383d41;
background-color: #e2e3e5;
border: 1px solid #383d41;
}
.tooltip-secondary .tooltip.bs-tooltip-top .arrow:before {
border-top-color: #383d41;
}
.tooltip-secondary .tooltip.bs-tooltip-right .arrow:before {
border-right-color: #383d41;
}
.tooltip-secondary .tooltip.bs-tooltip-bottom .arrow:before {
border-bottom-color: #383d41;
}
.tooltip-secondary .tooltip.bs-tooltip-left .arrow:before {
border-left-color: #383d41;
}
.tooltip-success .tooltip-inner {
color: #155724;
background-color: #d4edda;
border: 1px solid #155724;
}
.tooltip-success .tooltip.bs-tooltip-top .arrow:before {
border-top-color: #155724;
}
.tooltip-success .tooltip.bs-tooltip-right .arrow:before {
border-right-color: #155724;
}
.tooltip-success .tooltip.bs-tooltip-bottom .arrow:before {
border-bottom-color: #155724;
}
.tooltip-success .tooltip.bs-tooltip-left .arrow:before {
border-left-color: #155724;
}
.tooltip-warning .tooltip-inner {
color: #856404;
background-color: #fff3cd;
border: 1px solid #856404;
}
.tooltip-warning .tooltip.bs-tooltip-top .arrow:before {
border-top-color: #856404;
}
.tooltip-warning .tooltip.bs-tooltip-right .arrow:before {
border-right-color: #856404;
}
.tooltip-warning .tooltip.bs-tooltip-bottom .arrow:before {
border-bottom-color: #856404;
}
.tooltip-warning .tooltip.bs-tooltip-top .arrow:before {
border-left-color: #856404;
}
Hope that helps. Best regards,
希望有帮助。此致，
George
乔治
回答by kapil
I am using bootstrap 4.0.0-beta.2. and this code worked for me.
我正在使用引导程序 4.0.0-beta.2。这段代码对我有用。
.tooltip.bs-tooltip-bottom .tooltip-inner {
background:#444 !important;
}
.tooltip .arrow:before {
border-bottom-color:#444 !important;
border-top-color:#444 !important;
}
回答by max
Bootstrap 4has different classes than 3, you need to use:
Bootstrap 4具有与 不同的类3，您需要使用：
.tooltip.tooltip-top .tooltip-arrow,
.tooltip.bs-tether-element-attached-bottom .tooltip-arrow {
border-top-color: #7abcff;
}
These selectors represent arrow of the top aligned tooltip.
这些选择器代表顶部对齐的工具提示的箭头 。
回答by OctavioGT
Bootstrap v4.0.0-beta
Bootstrap v4.0.0-beta
data-toggle="tooltip"
data-placement="right"
data-toggle="tooltip"
data-placement="right"
-This works for me.
- 这对我有用。
.tooltip-inner{ color:#000; font-weight:400; background-color:#94C120;}
.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before, .tooltip.bs-tooltip-right .arrow::before { border-right-color: #94C120;}
回答by peezy
A super-easy way to change them is to override the default variables:
改变它们的一个超级简单的方法是覆盖默认变量：
$tooltip-opacity: $some_number;
$tooltip-arrow-color: $some_color;
$tooltip-bg: $some_color;
$tooltip-opacity: $some_number;
$tooltip-arrow-color: $some_color;
$tooltip-bg: $some_color;
