Materialise Css工具提示

我想知道是否可以在materialize.css框架中爲每個工具提示指定不同的背景顏色？Materialise Css工具提示

當激活工具提示時，我看不到在檢查器中生成任何附加標記，因此無法使用CSS進行定位。

2015-11-08 Mareks

Tooltip顏色可以使用css更改。你必須重寫默認的CSS如下。在backdrop類中指定顏色代碼background-color。

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

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

來源

2015-12-29 07:02:06

工具提示出現這樣的物質化：

你想改變的背景下，你可以做這樣的事情我想，如果你找出提示的ID：#TOOLTIP-ID.backdrop {background-color: red;}

來源

2015-11-23 18:25:02 Elena

要指定不同勢顏色爲每個提示，你可以做這樣的：

在初始化工具提示添加這個功能：

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

，你可以看到我改變類的屬性，所以你可以使用兌現，CSS顏色

來源

2017-03-25 12:00:23

我解決它像這樣

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

.material-tooltip .backdrop{ 
 
\t 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" > 
 
\t Test Tooltip 
 
</div>

來源

2017-07-13 18:43:01

Materialise Css工具提示

回答

相關問題