物化CSS工具提示 [英] Materialize Css Tooltip
本文介绍了物化CSS工具提示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想知道是否可以在materialize.css框架中为每个工具提示提供不同的背景颜色?
I was wondering is it possible to give each tooltip a different background color in materialize.css framework?
激活工具提示后，我没有在检查器中看到任何其他标记，因此无法使用CSS作为目标.
When the tooltip is activated I don't see any additional markup generated in the inspector, therefore can not target with CSS.
推荐答案
Tooltip的颜色可以使用css进行更改.您必须按如下方法覆盖默认的CSS.将颜色代码分配给backdrop类中的background-color.
Tooltip color can be changed using css. You have to override default css as follow. Assign your color code to background-color in backdrop class.
<style>
.backdrop{
background-color: purple;
}
</style>
以下是显示tooltip的4个按钮的示例工作代码段.
Following is sample working code snippet for 4 buttons which show 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>
这篇关于物化CSS工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
