实现 Css 工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33593605/
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
Materialize Css Tooltip
提问by Mareks
I was wondering is it possible to give each tooltip a different background color in materialize.css framework?
我想知道是否可以在 materialize.css 框架中为每个工具提示提供不同的背景颜色？
When the tooltip is activated I don't see any additional markup generated in the inspector, therefore can not target with CSS.
激活工具提示后，我看不到检查器中生成的任何其他标记，因此无法使用 CSS 定位。
回答by Sandun Madola
Tooltipcolor can be changed using css. You have to override default css as follow. Assign your color code to background-colorin backdropclass.
Tooltip可以使用 更改颜色css。您必须按如下方式覆盖默认 css。background-color在backdrop课堂上分配您的颜色代码。
<style>
.backdrop{
background-color: purple;
}
</style>
Following is sample working code snippet for 4 buttons which show tooltip.
以下是 4 个按钮的示例工作代码片段，其中显示tooltip.
<!DOCTYPE html>
<html>
<head>
<title>Tooltip</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--CSS for tooltip-->
<style>
.backdrop{
background-color: purple;
}
</style>
</head>
<body class="row">
<div class="col s12" >
<div class="col s12"> <h4> Click following</h4> </div>
<!-- data-position can be : bottom, top, left, or right -->
<!-- data-delay controls delay before tooltip shows (in milliseconds)-->
<a class="btn tooltipped col s2" data-position="bottom" data-delay="50" data-tooltip="I am tooltip"> Bottom</a>
<p class="col s1"></p><!--for making space-->
<a class="btn tooltipped col s2" data-position="top" data-delay="150" data-tooltip="I am tooltip"> Top</a>
<p class="col s1"></p><!--for making space-->
<a class="btn tooltipped col s2" data-position="left" data-delay="250" data-tooltip="I am tooltip"> Left</a>
<p class="col s1"></p><!--for making space-->
<a class="btn tooltipped col s2" data-position="right" data-delay="550" data-tooltip="I am tooltip"> Right</a>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
</body>
</html>回答by Elena
Tooltips appear like this in materialize: 
工具提示在 materialize 中显示如下：
I guess if you figure out the ID of the tooltip you want to change the background of you can do something like this: #TOOLTIP-ID.backdrop {background-color: red;}
我想如果您弄清楚要更改背景的工具提示的 ID，您可以执行以下操作： #TOOLTIP-ID.backdrop {background-color: red;}
回答by Julian
You can customise a tooltip with the following css (Materialize 1.0.0)
您可以使用以下 css 自定义工具提示（Materialize 1.0.0）
.material-tooltip {
padding: 10px 8px;
font-size: 1rem;
z-index: 2000;
background-color: transparent;
border-radius: 2px;
color: #fff;
min-height: 36px;
line-height: 120%;
opacity: 0;
position: absolute;
text-align: center;
max-width: calc(100% - 4px);
overflow: hidden;
left: 0;
top: 0;
pointer-events: none;
visibility: hidden;
background-color: #323232;
font-family: "Roboto Mono";
font-size: 0.8em;
font-weight: 700;
}
回答by Krzysztof Duszczyk
To specify diffrent color for each tooltip you can do it like this:
要为每个工具提示指定不同的颜色，您可以这样做：
while initializing tooltips add this function:
在初始化工具提示时添加此功能：
$('.tooltipped').tooltip({delay: 50}).each(function () {
var background = $(this).data('background-color');
if (background) {
$("#" + $(this).data('tooltip-id')).find(".backdrop").addClass(background);
}
});
and then on your tooltip specify it like this:
然后在你的工具提示上像这样指定它：
<a href="#!" class="tooltipped"
data-position="bottom"
data-delay="50"
data-tooltip="I'm a tooltip"
data-background-color="red lighten-3">
as you can see I'm changing the class attribute so you can use materialize-css colors
如您所见，我正在更改 class 属性，以便您可以使用 materialize-css 颜色
回答by Román Lezama
I solved it like this
我是这样解决的
$('.tooltipped').tooltip({delay: 50});.material-tooltip .backdrop{
background-color: #DB0000;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.min.css" rel="stylesheet"/>
<div class="tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am tooltip" >
Test Tooltip
</div>回答by JMKelley
Updated Answer for 1.0
更新了 1.0 的答案
To style the tooltip's background etc:
要设置工具提示的背景等样式：
.material-toolip {
background:#000;
}
To style the actual text within the tooltip use the following:
要在工具提示中设置实际文本的样式，请使用以下内容：
.material-tooltip .tooltip-content
{
font-size:12px;
}
回答by art_hq
For current version of materialize.css (1.0.0) you should style .material-tooltip and .tooltip-content
对于当前版本的 materialize.css (1.0.0) 你应该设置 .material-tooltip 和 .tooltip-content
like this (sass):
像这样（sass）：
.material-tooltip
background-color: white
border-color: gray
border-style: solid
border-width: 1px
.tooltip-content
padding: 3px
font-size: .8rem
background-color: transparent
color: #000
max-width: 250px
