Как сделать всплывающие подсказки Materialize привязанными к плавающим кнопкам действий?

Question

Я добавляю Подсказки материализации к кнопкам с плавающим действием , но подсказки не остаются рядом с кнопками, когда я прокручиваю страницу вниз.

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