Html 如何使mdl工具提示粘贴到图标上？

我正在材质图标上使用mdl工具提示，如何使工具提示粘贴到该图标上

通常情况下，工具提示如下所示，但滚动时，工具提示位于错误的div上：

但在卷轴上看起来是这样的：

代码： HTML

---

因此，正如我在评论中所说的，为了避免这种行为，您可以将绝对位置工具提示放在相对父对象中

例如，这里有一个小提琴，在输入文本的上方和下方都有内容文本。将输入悬停并滚动时，可以看到工具提示停留在同一位置且不移动

HTML部分

---

将您的绝对位置工具提示放入相对位置父项中，它会起作用。我会尝试一下，我是CSS新手，所以我必须查找它。我会在几分钟内为您做一个小提琴回答。由于某些原因，我现在看不到图标。很抱歉，这似乎对我不起作用。这可能看起来很蹩脚，但我将其标记为已解决，因为我认为它会起作用，并且由于一些紧急原因，我不得不离开该工作，但当我实现此功能时，它似乎不起作用。很抱歉给您带来不便。您的小提琴似乎没有使用。MDL有它自己的工具提示组件，它似乎不适用于即时滚动。此解决方案不起作用，因为它在工具提示上设置了

left

，因此在本例中，添加

position:absolute

似乎会使情况变得更糟。

    <div>
   <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
      <input class="mdl-textfield__input" type="text" id="headerLogoLinkField" onchange="updateHeaderLogoLink()" >
      <label class="mdl-textfield__label" for="headerLogoLinkField">Header Logo Link...</label>
   </div>
   <div id="header-logo-reset" class="icon material-icons toinline">replay</div>
   <div class="mdl-tooltip toinline" for="header-logo-reset">
      Reset To Default
   </div>
</div>

.toinline { 
 display: inline;
}

  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" id="headerLogoLinkField" onchange="updateHeaderLogoLink()" >
    <label class="mdl-textfield__label" for="headerLogoLinkField">Header Logo Link...</label>
    <div class="mdl-tooltip toinline" for="header-logo-reset">
      Reset To Default
    </div>
  </div>

.toinline { 
  background: #333; 
  position: absolute;
  color: #fff; 
  padding: 5px;
  display: none;
  top: -30px; 
  left: 50px;
}

.mdl-textfield:hover .toinline { 
  display: block; 
}

.mdl-textfield { position: relative; }