Как отобразить всплывающие подсказки при наведении курсора на кнопку с плавающим действием с использованием Material CSS - PullRequest
Новая
       25

Как отобразить всплывающие подсказки при наведении курсора на кнопку с плавающим действием с использованием Material CSS

0 голосов
/ 11 октября 2018

Справочная информация: Мне нужно изменить устаревшую систему.Одна вещь, которую имеет эта система, - это ужасная компоновка, поэтому частью моей цели является улучшение общего пользовательского опыта.Как часть этого я использую плавающие кнопки действия (FAB).Одна вещь о FAB - это то, что он является довольно новым для дизайна UX, поэтому его адаптация будет препятствием.

Проблема: Чтобы помочь с адаптацией моего дизайна, я хочу реализоватьFAB, который показывает всплывающие подсказки materialcss для каждой кнопки действия при наведении курсора на плавающую кнопку main .

1 Ответ

0 голосов
/ 11 октября 2018

Я сам нашел решение, надеюсь, это кому-нибудь поможет.Одна вещь, которая не так важна, - это то, что 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

...