我有一个以 Bootstrap 5 为主题的网站。我创建了一个按钮来复制网址。
它有效，没问题。
我希望当我点击按钮时，工具提示显示“留置权副本”。目前我们必须重做天桥才能看到变化。
我希望当我点击按钮而不将鼠标悬停在它上面时，它会显示默认工具提示。
测试：
// 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>答案 0 :(得分：0)
您可以在将鼠标悬停在按钮上时更改工具提示，方法是使用 Bootstap 的工具提示 update() 函数和 show() 函数。然后你可以附加一个监听器来监听鼠标离开。当鼠标离开时，您可以将工具提示切换回来。
注意：Bootstrap 的 documentation for update 说这个函数“更新元素工具提示的位置”。它没有说它会更新文本，但它会更新。根据这个Change Twitter Bootstrap Tooltip content on click，曾经有一个函数 fixTitle 可以更新文本，但现在不再可用（该函数可通过 _fixTitle 获得）。
对于 Pastebin 中的代码版本，使用 tooltipList[ ] 会比较复杂——您需要对一个按钮使用 [0]，对另一个按钮使用 [1]。由于您正在创建单独的 ClipboardJS 实例，因此创建具有唯一名称的单独工具提示实例可能是最简单的，而不必跟踪哪个元素是 [0]，哪个是 [1]。
我更新了我的答案以支持两个按钮，每个按钮使用单独的元素和实例。在您的 Pastebin 代码中，您展示了您将要从容器（模态）复制内容，但模态目前不在您的示例中。
我还将所有内容都包含在一个自调用表达式中，以避免任何命名冲突并封装所有内容。
为了更改模态的工具提示文本，需要在鼠标离开时专门隐藏工具提示。我不确定为什么模态与按钮不同，但由于工具提示是使用方法显示的，它似乎想要一种方法来隐藏它。
在鼠标离开后在回调函数中添加行：tooltipShare.hide(); 和tooltipDonation.hide(); 将隐藏工具提示。
要从带撇号的 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>在模态中使用时，初始工具提示不会消失（hide and dispose 不会让它消失）——但只要更新的工具提示内容长度相同或更长，它就会把它盖起来，当鼠标离开时，两个工具提示都会被删除。