0

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

注意：我只想使用 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!
    });
});

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

谢谢你的帮助！

4

1 回答 1

0

该错误依赖于应该在链接元素的工具提示对象上调用 show 方法

tooltipTriggerList.forEach(function(alink) {
    alink.addEventListener('click', function(e) {
        e.preventDefault();
        // do the copy logic ....
    
        // change title for tooltip
        alink.setAttribute('data-bs-original-title', 'Copied');
    
        // show the tooltip with the new title
        bootstrap.Tooltip.getInstance(alink).show()
    });
});
于 2021-10-28T00:10:26.387 回答