如何使 mdl 工具提示粘在图标上？答案

【问题标题】：How can I make the mdl tooltip to stick to the icon?如何使 mdl 工具提示粘在图标上？
【发布时间】：2016-09-11 13:14:39
【问题描述】：

我在材质图标上使用 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;
}

【问题讨论】：

将您的绝对位置工具提示放入相对位置父级中，我想它会起作用
会试试的，我是 CSS 新手，所以我必须查一下。
几分钟后会为您解答

标签： html css material-design material-design-lite

【解决方案1】：

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

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

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

【讨论】：

由于某种原因我现在看不到图标。
很抱歉，但这似乎对我不起作用。这可能看起来很蹩脚，但我将其标记为已解决，因为我认为它会起作用，并且出于某种紧急原因我不得不离开工作，但是当我实施它时，它似乎不起作用。很抱歉给您带来不便。
你的小提琴似乎没有使用Material Design Lite (MDL)。 MDL 有自己的工具提示组件，它似乎不适用于开箱即用的滚动。这个解决方案不起作用，因为它在工具提示上设置了left 之类的东西，所以在这种情况下添加position: absolute 似乎会使事情变得更糟。