实现 Css 工具提示

Materialize Css Tooltip

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

激活工具提示后,我没有在检查器中看到任何额外的标记生成,因此无法使用 CSS 定位。

工具提示在实体化中显示如下:

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

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

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

以下是显示 tooltip.

的 4 个按钮的示例工作代码片段

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

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

在初始化工具提示时添加此函数:

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

如您所见,我正在更改 class 属性,以便您可以使用 materialize-css colors

我是这样解决的

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

您可以使用以下内容自定义工具提示 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;
}

1.0 的更新答案

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

.material-toolip {
  background:#000;
}

要为工具提示中的实际文本设置样式,请使用以下内容:

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

对于 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