我有一个Bootstrap 5主题的网站。我创建了一个按钮来复制网址。
它有效，没问题。
-
我希望当我点击按钮时，工具提示显示"；Lien copié"。目前，我们必须重做一次飞越才能看到变化。
-
我希望当我点击按钮而不将鼠标悬停在它上面时，它会显示默认的工具提示。
测试：
// btn-clipboard.js
var clipboardShare = new ClipboardJS('.btn-clipboard-share');
clipboardShare.on('success', function(e) {
document.getElementById('btn-clipboard-share').setAttribute('data-bs-original-title', 'Lien copié');
});
clipboardShare.on('error', function(e) {
document.getElementById('btn-clipboard-share').setAttribute('data-bs-original-title', 'Erreur');
});
// tooltip.js
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})<!doctype html>
<html lang="fr" class="h-100">
<head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
</head>
<body>
<button role="button" id="btn-clipboard-share" class="btn btn-outline-dark btn-clipboard-share m-3" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Copier le lien" data-clipboard-text="https://www.example.fr">https://www.example.fr</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>
</body>
</html>当您将鼠标悬停在按钮上时，可以使用Bootstap的工具提示update()函数和show()函数来更改工具提示。然后你可以附加一个监听器来监听鼠标离开。当鼠标离开时，可以将工具提示切换回。
注意：Bootstrap的更新文档中说，函数"更新元素工具提示的位置"。它没有说它会更新文本，但它确实会。根据点击更改推特引导工具提示的内容，过去有一个函数fixTitle可以更新文本，但现在已经不可用了(该函数可以通过_fixTitle获得(。
更新
对于Pastebin中的代码版本，使用tooltipList[]会比较复杂——您需要使用[0]作为一个按钮，使用[1]作为另一个按钮。由于您要创建单独的ClipboardJS实例，因此创建具有唯一名称的单独工具提示实例可能是最简单的，而不必跟踪哪个元素是[0]，哪个是[1]。
我已经更新了我的答案以支持两个按钮，每个按钮使用单独的元素和实例。在Pastebin代码中，您显示将从容器(模态(复制内容，但模态当前不在您的示例中。
我还将所有内容都封装在一个自调用表达式中，以避免任何命名冲突并封装所有内容。
更新2
为了更改模态的工具提示文本，需要在鼠标离开时专门隐藏工具提示。我不知道为什么模态与按钮不同，但由于工具提示是使用方法显示的，它似乎想要一个方法来隐藏它
在鼠标离开后向回调函数中添加行：tooltipShare.hide();和tooltipDonation.hide();将隐藏工具提示。
更新3
要使用撇号从Copier le lien切换到Copier l'adresse，请将用于定义字符串的单引号更改为双引号。
tooltipShareButton.setAttribute('data-original-title', 'Copier le lien');
tooltipShareButton.setAttribute("data-original-title", "Copier l'adresse");
因为Copier l’adresse比Lien copié长得多，所以对造型进行一些调整是有意义的。如果你能把下面的样式放在脑子里(或添加到一个CSS文件中(，这样它们就不会被覆盖，它们会帮助工具提示看起来更好。
<style>
.tooltip-inner {
width: 7rem;
}
.tooltip.show {
opacity: 1;
}
</style>
(function (doc, clip, boot) {
// btn-clipboard.js
var clipboardShare = new clip('#btn-clipboard-share');
var clipboardDonation = new clip('#btn-clipboard-donation');
var tooltipShareButton = doc.getElementById('btn-clipboard-share');
var tooltipDonationButton = doc.getElementById('btn-clipboard-donation');
var tooltipShare = new boot.Tooltip(tooltipShareButton);
var tooltipDonation = new boot.Tooltip(tooltipDonationButton);
clipboardShare.on('success', function(e) {
function restoreTitle(e) {
tooltipShare.hide();
tooltipShareButton.setAttribute('data-bs-original-title', 'Copier le lien');
tooltipShareButton.removeEventListener('mouseleave', restoreTitle);
}
tooltipShareButton.setAttribute('data-bs-original-title', 'Lien copié');
tooltipShare.update();
tooltipShare.show();
tooltipShareButton.addEventListener('mouseleave', restoreTitle);
});
clipboardShare.on('error', function(e) {
function restoreTitle(e) {
tooltipShare.hide();
tooltipShareButton.setAttribute('data-bs-original-title', 'Copier le lien');
tooltipShareButton.removeEventListener('mouseleave', restoreTitle);
}
tooltipShareButton.setAttribute('data-bs-original-title', 'Erreur');
tooltipShare.update();
tooltipShare.show();
tooltipShareButton.addEventListener('mouseleave', restoreTitle);
});
clipboardDonation.on('success', function(e) {
function restoreTitle(e) {
tooltipDonation.hide();
tooltipDonationButton.setAttribute('data-bs-original-title', 'Copier le lien');
tooltipDonationButton.removeEventListener('mouseleave', restoreTitle);
}
tooltipDonationButton.setAttribute('data-bs-original-title', 'Adresse copiée');
tooltipDonation.update();
tooltipDonation.show();
tooltipDonationButton.addEventListener('mouseleave', restoreTitle);
});
clipboardDonation.on('error', function(e) {
function restoreTitle(e) {
tooltipShare.hide();
tooltipDonationButton.setAttribute('data-bs-original-title', 'Copier le lien');
tooltipDonationButton.removeEventListener('mouseleave', restoreTitle);
}
tooltipDonationButton.setAttribute('data-bs-original-title', 'Erreur');
tooltipShare.update();
tooltipShare.show();
tooltipDonationButton.addEventListener('mouseleave', restoreTitle);
});
}(document, ClipboardJS, bootstrap));<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>
<style>
#btn-clipboard-share, #btn-clipboard-donation {
width: 6rem;
}
</style>
<button role="button" id="btn-clipboard-share" class="btn btn-outline-dark m-3" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Copier le lien" data-clipboard-text="https://www.example.fr/Share">Share</button>
<button role="button" id="btn-clipboard-donation" class="btn btn-outline-dark m-3" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Copier le lien" data-clipboard-text="https://www.example.fr/Donation">Donation</button>在模态中使用时，初始工具提示不会消失(隐藏和处置不会使其消失(，但只要更新的工具提示内容相同或更长，它就会覆盖它，并且当鼠标离开时，两个工具提示都会被删除