如何让 Materialise Tooltip 粘附在浮动操作按钮上？

Question

我正在添加 Materialize's tooltips to floating action buttons，但是当我向下滚动页面时，工具提示没有粘在按钮旁边。

 <div class="fixed-action-btn">
  <a class="btn-floating btn-large turquoise tooltipped pulse" data-position="left" data-tooltip="Learn More">
    <i class="large material-icons">add_circle_outline</i>
  </a>
  <ul>
    <li><a class="btn-floating blue tooltipped" data-position="left" data-tooltip="I'm interested in staying up to date!"><i class="material-icons">favorite</i></a></li>
    <li><a class="btn-floating green tooltipped" data-position="left" data-tooltip="I'm interested in funding this!"><i class="material-icons">business_center</i></a></li>
    <li><a class="btn-floating yellow tooltipped" data-position="left" data-tooltip="I'm interested in beta testing!"><i class="material-icons">pets</i></a></li>
  </ul>
</div>

我附上了两张屏幕截图 - 一张在页面顶部我希望工具提示在我滚动到页面的任何位置时如何显示，以及当我向下滚动时它当前的样子。

非常感谢！

Answer 1

为此，我在工具提示 github 文档中查找了一个名为 _positionTooltip 的函数。代码似乎没有滚动侦听器，因此在下面的示例中，我创建了一个调用 _positionTooltip 函数的滚动侦听器。

我能够像这样让工具提示保持正确位置：

您也可以在这里查看：https://codepen.io/tuffant21/pen/mdJggpw

let tooltipInstances;

window.onload = function() {
  M.FloatingActionButton.init(document.querySelectorAll('.fixed-action-btn'));
  tooltipInstances = M.Tooltip.init(document.querySelectorAll('.tooltipped'));

  // You should remove this event listener when it is no longer needed.
  window.addEventListener('scroll', () => {
    for (let i = 0; i < tooltipInstances.length; ++i) {
      tooltipInstances[i]._positionTooltip();
    }
  });
}

/* set body height to mimic content on a page */
body {
  height: 5000px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<div class="fixed-action-btn">
  <a class="btn-floating btn-large turquoise pulse tooltipped fixed" data-position="left" data-tooltip="Learn More">
    <i class="large material-icons">add_circle_outline</i>
  </a>
  <ul>
    <li>
      <a class="btn-floating blue tooltipped" data-position="left" data-tooltip="I'm interested in staying up to date!">
        <i class="material-icons">favorite</i></a>
    </li>
    <li>
      <a class="btn-floating green tooltipped" data-position="left" data-tooltip="I'm interested in funding this!">
        <i class="material-icons">business_center</i></a>
    </li>
    <li>
      <a class="btn-floating yellow tooltipped" data-position="left" data-tooltip="I'm interested in beta testing!">
        <i class="material-icons">pets</i></a>
    </li>
  </ul>
</div>

如何让 Materialise Tooltip 粘附在浮动操作按钮上？

How do I make Materialize's Tooltips sticky to floating action buttons?

html

css

tooltip

materialize

floating-action-button