html - 如何使 mdl 工具提示贴在图标上？

Question

我在 Material 图标上使用 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

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

例如，这是一个 fiddle ，内容文本位于输入文本的上方和下方。当您悬停输入并滚动时，您可以看到工具提示停留在同一位置并且不会移动。

HTML part

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

.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