Javascript 如何使用材质CSS将鼠标悬停在浮动操作按钮上时显示工具提示

背景：我需要重新设计一个遗留系统。这个系统有一个糟糕的布局，因此我的目标之一是改善整体用户体验。作为其中的一部分，我使用浮动动作按钮（FAB）。晶圆厂的一点是，它对用户体验设计来说是相当新的，因此它的适应将是一个障碍

---

问题：为了帮助调整我的设计，我想实现一个FAB，当鼠标悬停在主浮动按钮上时，为每个操作按钮显示materialcss工具提示。

我自己想出了解决方案，我希望这能帮助一些人。半重要的一点是，jquery需要在材料js之前进行源代码获取

HTML:

    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <div class="fixed-action-btn">
      <a id="fab-btn" class="btn-floating btn-large red">
        <i class="large material-icons">mode_edit</i>
      </a>
      <ul>
        <li><a class="btn-floating red tooltipped" data-position="left" data-tooltip="I am a tooltip"><i class="material-icons">insert_chart</i></a></li>
        <li><a class="btn-floating yellow darken-1 tooltipped" data-position="left" data-tooltip="I am a tooltip"><i class="material-icons">format_quote</i></a></li>
        <li><a class="btn-floating green tooltipped" data-position="left" data-tooltip="I am a tooltip"><i class="material-icons">publish</i></a></li>
        <li><a class="btn-floating blue tooltipped" data-position="left" data-tooltip="I am a tooltip"><i class="material-icons">attach_file</i></a></li>
      </ul>
    </div>

$(document).ready(function(){
  $('.fixed-action-btn').floatingActionButton();
});
$(document).ready(function(){
  $('.tooltipped').tooltip();
});

$("#fab-btn").mouseover(function(){
setTimeout(function(){
    $('.tooltipped').tooltip('open');

},600); 
});
$("#fab-btn").mouseout(function(){
    $('.tooltipped').tooltip('close');
})

现场演示：