Question

背景：我需要重新设计旧系统。该系统的一件事是糟糕的布局，因此我的目标之一是改善整体用户体验。作为其中的一部分，我使用了浮动操作按钮（FAB）。关于FAB的一件事是，它对于UX设计是相当新的，因此其适应性将成为障碍。

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

Answer 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

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

1 个答案: