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

【问题标题】：How to show tooltips when hovering over floating-action-button using Material CSS使用 Material CSS 将鼠标悬停在浮动操作按钮上时如何显示工具提示
【发布时间】：2018-10-11 00:51:35
【问题描述】：

背景：我需要重新设计一个遗留系统。该系统的一件事是糟糕的布局，因此我的目标之一是改善整体用户体验。作为其中的一部分，我正在使用浮动操作按钮 (FAB)。 FAB 的一件事是它对于 UX 设计来说是相当新的，所以它的适应将是一个障碍。

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

【问题讨论】：

标签： javascript jquery material-design material-ui

【解决方案1】：

我自己想出了解决方案，我希望这对某人有所帮助。半重要的一件事是 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>

Javascript：

$(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');
})

现场演示：jsfiddle.net/1oz2ucty

【讨论】：