工具提示和元素MaterialiseCSS之间的空间

Question

我有一些问题试图让图标的工具提示更接近它。 这就是我想要做的：

我的警告图标如下所示：

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

关于如何实现这一目标的任何想法？

Answer 1

{h} material.js在工具提示中添加transform: translateY(10px) translateX(0px) ...尝试更改translateY值以缩小差距。

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>