Search code examples
cssmaterialize

Space between tooltip and element MaterializeCSS

I´m having some issues trying to get the tooltip of an icon closer to it. This is what I´m trying to do:

enter image description here

My warning icon looks like this:

<i class="material-icons icon-pulse tooltipped" style="color: red; vertical-align: bottom;" data-position="top" data-delay="50" data-tooltip="Delayed 17min">report</i>

Any ideas on how to achieve this?

Solution

  • The material.js add a transform: translateY(10px) translateX(0px) to the tooltip on hover...Try to change the translateY value to reduce the gap.

    Stack Snippet

    body {
  padding: 50px;
}

.material-tooltip {
  transform: translateY(0px) translateX(0px) !important;
}
    <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.100.2/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<i class="material-icons icon-pulse tooltipped" style="color: red; vertical-align: bottom;" data-position="top" data-delay="50" data-tooltip="Delayed 17min">report</i>