单击事件后无法使用 jQuery 更新 Materialize.css 工具提示

Question

我正在我的投资组合网站上使用 Materialize.css，并且正在使用 npm 包 clipboard.js。我在一个浮动操作按钮中使用它，并且复制到剪贴板功能按预期工作（当用户单击该按钮时，它将我的电子邮件复制到他们的剪贴板，就像它应该的那样）。

但是，我希望工具提示从“"Click to copy my email to your clipboard!" 更新为像 "Copied to your clipboard ✅" 这样的成功消息。我已经尝试了下面的代码，它实际上不会更新页面，但我可以有时会看到新消息（它非常不一致，我不想要）。

这是我的 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 元素，因为我有时可以看到更新后的文本，但它非常不一致，为了让这个功能值得使用，我需要它非常一致。

如有任何帮助，我们将不胜感激！

Answer 1

您运行遇到的问题是 materialize.css 添加了其他 DOM 最终作为工具提示本身出现在屏幕上的元素 - 您没有正确定位的元素现在 - 您没有在 HTML 中写入的元素。您的目标是 materialize.css 用于创建其他元素的原始数据属性。在渲染后更新那些数据属性太少太迟了......到那时，materialize.css 库已经查看了这些属性并获得了它需要的东西。

如果您查看工具提示上的 official docs page，我们可以对该页面进行一些调查。打开你的开发控制台并滚动到底部你会看到四个 DOM 元素和 class material-tooltip - 这些是由库添加的，这些是 DOM 元素实际显示在屏幕上。

打开那些 div 并观察当您将鼠标悬停在屏幕上的“底部”、“顶部”、“左”、“右”按钮上时它们会发生什么。随着每个工具提示的出现，您应该注意到要显示的消息被作为文本注入到该元素中，并且它为一些 CSS 属性设置了动画。

如果您想更改显示的文本，您可以跳过编辑数据属性（尽管如果图书馆偶尔刷新内容，更改属性可能仍然是个好主意)... 相反，我们需要编辑 ^^THESE^^ 元素中显示的文本。

如果该页面上只显示一个工具提示，它应该像这样简单：

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

或者如果您在该页面上有多个，您可以尝试确定哪个 div 是哪个工具提示，但我怀疑这可能最终不可靠。更新所有 divs 可能会更安全......图书馆将在下次呈现时覆盖内容......同样，它从你的数据属性中获取。更新所有这些看起来像：

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

Answer 2

这是我发现的唯一适合我的解决方案.. 免责声明 - 它有点老套，基本上它会在点击时破坏工具提示并使用新的 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);

});

单击事件后无法使用 jQuery 更新 Materialize.css 工具提示

Unable to update Materialize.css tooltips using jQuery after click event

javascript

jquery

tooltip

materialize