Question

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

当激活工具提示时，我在检查器中看不到任何其他标记，因此无法使用CSS进行定位。

Answer 1

可以使用Tooltip更改

css颜色。您必须覆盖默认的css，如下所示。将您的颜色代码分配到background-color类中的backdrop。

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

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用以下css（Materialise 1.0.0）

自定义工具提示

select distinct * 
from (
  select FieldID, ChangeField  
       first_value(OldValue) over (partition by FieldID, ChangeField order by ChangeDate) OldValue,
       last_value(OldValue) over (partition by FieldID, ChangeField order by ChangeDate) NewValue,
       last_value(OldValue) over (partition by FieldID, ChangeField order by ChangeDate) dtChangeDate
  from table t
) t;

Answer 3

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

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

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

Answer 4

我解决了这个问题

＆＃13;

$('.tooltipped').tooltip({delay: 50});

＆＃13;

.material-tooltip .backdrop{
	background-color: #DB0000;
}

＆＃13;

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

＆＃13;

Answer 5

更新为1.0的答案

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

.material-toolip {
  background:#000;
}

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

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

Answer 6

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

像这样（无礼）：

.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

实现Css工具提示

6 个答案: