时间戳

首页 > 解决方案 > 如何使 Materialise 的工具提示粘在浮动操作按钮上？

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

问题描述

我将Materialize 的工具提示添加到浮动操作按钮，但是当我向下滚动页面时，工具提示并没有粘在按钮旁边。

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

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

非常感谢！

我希望它看起来如何 我向下滚动时的当前外观

标签： htmlcsstooltipmaterializefloating-action-button

解决方案

为此，我在工具提示 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>

推荐阅读