如何使 Materialise 的工具提示粘在浮动操作按钮上？

Question

我正在将Materialize's tooltips 添加到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>