Materialize Css Tooltip

2020-07-10 07:31发布

站内问答 / HTML/CSS
1685 7 5

I was wondering is it possible to give each tooltip a different background color in materialize.css framework?

When the tooltip is activated I don't see any additional markup generated in the inspector, therefore can not target with CSS.

7条回答
够拽才男人
2楼-- · 2020-07-10 07:57

I solved it like this

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

查看更多
0人赞 添加讨论(0) 举报
该账号已被封号
3楼-- · 2020-07-10 08:00

Tooltips appear like this in materialize: enter image description here

I guess if you figure out the ID of the tooltip you want to change the background of you can do something like this: #TOOLTIP-ID.backdrop {background-color: red;}

查看更多
0人赞 添加讨论(0) 举报
再贱就再见
4楼-- · 2020-07-10 08:04

To specify diffrent color for each tooltip you can do it like this:

while initializing tooltips add this function:

$('.tooltipped').tooltip({delay: 50}).each(function () {
    var background = $(this).data('background-color');
    if (background) {
        $("#" + $(this).data('tooltip-id')).find(".backdrop").addClass(background);
    }
});

and then on your tooltip specify it like this:

<a href="#!" class="tooltipped"
   data-position="bottom"
   data-delay="50"
   data-tooltip="I'm a tooltip"
   data-background-color="red lighten-3">

as you can see I'm changing the class attribute so you can use materialize-css colors

查看更多
0人赞 添加讨论(0) 举报
在下西门庆
5楼-- · 2020-07-10 08:05

Tooltip color can be changed using css. You have to override default css as follow. Assign your color code to background-color in backdrop class.

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

Following is sample working code snippet for 4 buttons which show 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>

查看更多
0人赞 添加讨论(0) 举报
Emotional °昔
6楼-- · 2020-07-10 08:06

For current version of materialize.css (1.0.0) you should style .material-tooltip and .tooltip-content

like this (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人赞 添加讨论(0) 举报
Viruses.
7楼-- · 2020-07-10 08:10

Updated Answer for 1.0

To style the tooltip's background etc:

.material-toolip {
  background:#000;
}

To style the actual text within the tooltip use the following:

.material-tooltip .tooltip-content
{
  font-size:12px;
}
查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)