Materialize Css Tooltip

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


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>

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


You can customise a tooltip with the following 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;
}

Tags:

Css

Materialize

Recent Posts