物化 Css 工具提示答案

【问题标题】：Materialize Css Tooltip物化 Css 工具提示
【发布时间】：2015-11-08 11:50:03
【问题描述】：

我想知道是否可以在 materialize.css 框架中为每个工具提示赋予不同的背景颜色？

激活工具提示后，我看不到检查器中生成任何其他标记，因此无法使用 CSS 定位。

【问题讨论】：

【解决方案1】：

Tooltip 可以使用css 更改颜色。您必须按如下方式覆盖默认 css。在backdrop 类中将您的颜色代码分配给background-color。

  <style>
     .backdrop{
       background-color: purple;
     }
  </style>

以下是显示 tooltip 的 4 个按钮的示例工作代码 sn-p。

<!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>

【讨论】：

【解决方案2】：

工具提示在具体化中如下所示：

我想如果你知道你想要改变背景的工具提示的 ID 可以这样做：#TOOLTIP-ID.backdrop {background-color: red;}

【讨论】：

【解决方案3】：

您可以使用以下 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;
}

【讨论】：

【解决方案4】：

要为每个工具提示指定不同的颜色，您可以这样做：

在初始化工具提示时添加此功能：

$('.tooltipped').tooltip({delay: 50}).each(function () {
    var background = $(this).data('background-color');
    if (background) {
        $("#" + $(this).data('tooltip-id')).find(".backdrop").addClass(background);
    }
});

然后在您的工具提示中指定如下：

<a href="#!" class="tooltipped"
   data-position="bottom"
   data-delay="50"
   data-tooltip="I'm a tooltip"
   data-background-color="red lighten-3">

如您所见，我正在更改类属性，以便您可以使用 materialize-css 颜色

【讨论】：

【解决方案5】：

我是这样解决的

$('.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>

【讨论】：

【解决方案6】：

对于当前版本的 materialize.css (1.0.0)，您应该设置 .material-tooltip 和 .tooltip-content 的样式

像这样（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

【讨论】：

【解决方案7】：

1.0 的更新答案

设置工具提示的背景样式等：

.material-toolip {
  background:#000;
}

要在工具提示中设置实际文本的样式，请使用以下命令：

.material-tooltip .tooltip-content
{
  font-size:12px;
}

【讨论】：