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

Question

我在材质图标上使用mdl工具提示，我该怎么做才能使工具提示贴在图标上。

通常工具提示看起来像这样但滚动时工具提示是错误的div：

但滚动时看起来像这样：

代码： HTML

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

CSS

.toinline { 
 display: inline;
}

Answer 1

所以，正如我在评论中所说的那样，为了避免这种行为，你可以将你的绝对位置工具提示置于相对父级。

这是一个小提琴，例如输入文本上方和下方的内容文字。当您将鼠标悬停在输入并滚动时，您可以看到工具提示保持在同一位置并且不移动。

  

HTML部分

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

  

CSS部分

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

Fiddle