实现Css工具提示

Question

实现Css工具提示

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

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

Answer 1

Tooltip颜色可以改变使用css.您必须覆盖默认的css,如下所示.background-color在backdrop课堂上分配颜色代码.

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

Run Code Online (Sandbox Code Playgroud)

以下是显示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>

Run Code Online (Sandbox Code Playgroud)

Answer 2

Ele*_*ena 9

工具提示在物化中显示如下:

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

Answer 3

小智 8

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年前
查看次数：	20635 次
最近记录：	6 年，5 月前