Question

我发誓我搜索过但没有找到这个问题。对不起，如果我做错了！

注意：我只想使用 JavaScript！我不想包含 jQuery 库！有很多使用 jQuery 的例子，但它们对我没有帮助。

问题：我正在创建一个网站，并且使用的是 Bootstrap 5 + Popper。我在内容中写了一些电子邮件地址。每个电子邮件地址都嵌入在一个 HTML 锚点中。对于每个电子邮件地址，我会在悬停它时显示“复制地址”工具提示。单击锚文本（电子邮件地址）时，我想将电子邮件地址复制到剪贴板，以便用户可以将其粘贴到他们使用的任何电子邮件客户端中。单击电子邮件地址后，工具提示标题应更改为“已复制”以供用户确认。

HTML 代码：

<a href="#" data-bs-toggle="tooltip" title="" data-bs-original-title="Copy address">office@example.com</a>
...
<!-- This input text field is used to copy the text (E-Mail addresses) via JavaScript -->
<input type="text" id="copy_input" readonly style="position: absolute; left: -9999px;">

Popper 工具提示的 JavaScript 初始化（就像它在工具提示的 Bootstrap 页面上一样）：

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl);
});

这里是我的 JavaScript 代码，它可以将电子邮件地址复制到剪贴板，但无法更改工具提示标题：

tooltipTriggerList.forEach(function(alink) {
    alink.addEventListener('click', function(e) {
        e.preventDefault();
        const copy_input = document.querySelector('#copy_input');
        copy_input.value = alink.textContent.trim();
        copy_input.select();
        document.execCommand('copy');
        copy_input.value = '';
        alink.setAttribute('data-bs-original-title', 'Copied');
        alink.setAttribute('title', 'Copied');  // just to be sure...
        alink.show();  // I thought show() would re-display the changed title, but no!
    });
});

不幸的是，工具提示标题没有被上面的监听器函数改变。

感谢您的帮助！

单击时更改 Popper.js 工具提示标题

0 个答案: