Блог

Я использую Materialize.css на своем сайте портфолио и использую пакет npm clipboard.js . Я использую это в плавающей кнопке действия, и функция копирования в буфер обмена работает так, как задумано (когда пользователь нажимает на кнопку, он копирует мое электронное письмо в свой буфер обмена, как и должно быть).

Однако я хочу, чтобы всплывающая подсказка обновилась с «»Нажмите, чтобы скопировать мое электронное письмо в ваш буфер обмена!» на сообщение об успешном завершении, например «Скопировано в ваш буфер обмена ✅». Я попробовал приведенный ниже код, и он фактически не обновит страницу, хотя иногда я могу видеть новое сообщение (просто оно очень непоследовательное, чего я не хочу).

Это мой html-элемент:

 <li>
 <a id="email" data-clipboard-text="example@gmail.com" class="btn-floating red waves-effect waves-light tooltipped" data-position="left" data-tooltip="Click to copy my email to your clipboard!"><i class="material-icons">mail</i></a>
</li>
  

и вот мой javascript:

 var clipboard = new ClipboardJS('#email');

    clipboard.on('success', function(e) {
        var anchorElement = $('#email');
        anchorElement.attr('data-tooltip', 'Copied to your clipboard ✅');
        anchorElement.addClass('success');
        anchorElement.tooltip();

        // Reset after a timeout
        anchorElement.mouseleave(function() {

            setTimeout( function(){
                anchorElement.attr('data-tooltip', 'Click to copy my email address to your clipboard!');
                anchorElement.removeClass('success');
                anchorElement.tooltip();
            }, 300);
        });

        e.clearSelection();
    });
  

Я хотел бы, чтобы всплывающая подсказка последовательно отображала обновленное значение, но я не смог выяснить, что не так с имеющимся у меня кодом. Я могу сказать, что он обновляет html-элемент, поскольку я иногда вижу обновленный текст, но он очень непоследователен, и для того, чтобы эту функцию вообще стоило использовать, мне нужно, чтобы она была очень последовательной.

Любая помощь была бы высоко оценена!

Проблема, с которой вы сталкиваетесь, заключается в том, что materialize.css добавляет другие элементы DOM, которые в конечном итоге появляются на экране как сами всплывающие подсказки — элементы, на которые вы не ориентируетесь прямо сейчас — элементы, которые вы не написали в своем HTML. Вы ориентируетесь на исходные данные-атрибуты, которые materialize.css использует для создания этих других элементов. Обновлять эти атрибуты данных после рендеринга слишком поздно … к тому времени библиотека materialize.css уже просмотрела эти атрибуты и получила то, что ей нужно.

Если вы посмотрите на официальную страницу документов, посвященную всплывающим подсказкам, мы можем немного разобраться на этой странице. Откройте консоль разработчика и прокрутите вниз, вы увидите четыре элемента DOM с классом material-tooltip — они были добавлены библиотекой, и это элементы DOM, которые на самом деле отображаются на экране.

Откройте их div и посмотрите, что с ними происходит при наведении курсора мыши на нижнюю, верхнюю, левую, правую кнопки на экране. При появлении каждой всплывающей подсказки вы должны заметить, что отображаемое сообщение вводится в этот элемент в виде текста и анимирует некоторые свойства CSS.

Если вы хотите изменить отображаемый текст, вы, вероятно, можете пропустить редактирование атрибутов данных (хотя, если библиотека время от времени обновляет содержимое, изменение атрибутов все равно может быть хорошей идеей) … вместо этого нам нужно отредактировать текст, отображаемый в ^^ ЭТИХ ^^ элементах.

Если на этой странице отображается только одна всплывающая подсказка, она должна быть такой же простой, как что-то вроде этого:

 $('.material-tooltip').innerText = 'Copied to your clipboard ✅'
  

или, если у вас их несколько на этой странице, вы можете попытаться определить, какая div для какой всплывающей подсказки предназначена, но я подозреваю, что это может оказаться ненадежным. Вероятно, было бы безопаснее обновить ВСЕ div ы… библиотека в любом случае перезапишет содержимое при следующем рендеринге… которое, опять же, он получает из ваших атрибутов данных. Обновление всех из них будет выглядеть примерно так:

 $('.material-tooltip').each( eachDiv => {
    eachDiv.innerText = 'Copied to your clipboard ✅'
})
  

вот единственное решение, которое я нашел, которое работает для меня .. отказ от ответственности — это немного халтурно, в основном оно уничтожает всплывающую подсказку по щелчку и восстанавливает ее с помощью нового attr, затем по истечении времени ожидания сбрасывает ее обратно.

 $('#shareLink').on('click', function (e) {
  
  $('#shareLink').tooltip('dispose').removeClass('material-tooltip').attr('title', 'Link copied!');
  $('#shareLink').addClass('material-tooltip').tooltip('show');

  setTimeout( function () {
    $('#shareLink').tooltip('dispose').removeClass('material-tooltip').attr('title', 'Copy link to Clipboard');
    $('#shareLink').addClass('material-tooltip').tooltip('enable');
  }, 2000);

});