您可以在将鼠标悬停在按钮上时更改工具提示,方法是使用 Bootstap 的工具提示 update() 函数和 show() 函数。然后你可以附加一个监听器来监听鼠标离开。当鼠标离开时,您可以将工具提示切换回来。
注意:Bootstrap 的 documentation for update 表示功能“更新元素工具提示的位置”。它并没有说它会更新文本,但确实会。根据这个Change Twitter Bootstrap Tooltip content on click,曾经有一个函数 fixTitle 可以更新文本,但不再可用(该函数通过 _fixTitle 可用)。
更新
对于您在 Pastebin 中的代码版本,使用 tooltipList[ ] 有一个复杂之处——您需要将 [0] 用于一个按钮,而将 [1] 用于另一个按钮。由于您正在创建单独的 ClipboardJS 实例,因此创建具有唯一名称的单独工具提示实例可能最简单,而不必跟踪哪个元素是 [0] 哪个是 [1]。
我已更新我的答案以支持两个按钮,每个按钮使用单独的元素和实例。在您的 Pastebin 代码中,您表明您将从容器(模态)复制内容,但模态当前不在您的示例中。
我还将所有内容都包含在自调用表达式中,以避免任何命名冲突并封装所有内容。
更新 2
要更改模态框的工具提示文本,需要在鼠标离开时专门隐藏工具提示。我不确定为什么模式与按钮不同,但由于工具提示是使用方法显示的,因此似乎需要一种方法来隐藏它。
鼠标离开后在回调函数中添加tooltipShare.hide();和tooltipDonation.hide();这行会隐藏tooltip。
更新 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>
在模式中使用时,初始工具提示不会消失(隐藏和处置不会让它消失)——但只要更新的工具提示内容长度相同或更长,它就会将其覆盖,当鼠标离开时,两个工具提示都会被删除。