web-dev-qa-db-ja.com

Cssツールチップを具体化する

Materialize.cssフレームワークで各ツールチップに異なる背景色を与えることは可能でしょうか？

ツールチップをアクティブにすると、インスペクターで生成された追加のマークアップが表示されないため、CSSでターゲットにできません。

cssmaterialize
5
Mareks

Tooltipの色はcssを使用して変更できます。次のようにデフォルトのcssをオーバーライドする必要があります。 backdropクラスのbackground-colorにカラーコードを割り当てます。

  <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>
18
Sandun Madola

マテリアライズでは、ツールチップは次のように表示されます。 enter image description here

背景を変更したいツールチップのIDがわかれば、次のようなことができると思います。#TOOLTIP-ID.backdrop {background-color: red;}

9
Elena

次のcssでツールチップをカスタマイズできます（マテリアライズ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
Julian

ツールチップごとに異なる色を指定するには、次のようにします。

ツールチップの初期化中に、この関数を追加します。

$('.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の色を使用できるようにクラス属性を変更しています

2
Krzysztof Duszczyk

私はこのようにそれを解決しました

$('.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>
1
Román Lezama

1.0の回答を更新

ツールチップの背景などのスタイルを設定するには：

.material-toolip {
  background:#000;
}

ツールチップ内の実際のテキストのスタイルを設定するには、次を使用します。

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

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