单击按钮时工具提示的文本如何更改? [英] How does the text of the tooltip change when the button is clicked?
问题描述
我有一个以 Bootstrap 5 为主题的网站.我创建了一个按钮来复制网址.
I have a site with the Bootstrap 5 theme. I created a button to copy a url.
它有效，没问题.
我希望当我点击按钮时，工具提示显示留置权副本".目前我们必须重做天桥才能看到变化.
I want that when I click on the button, the tooltip displays "Lien copié". Currently we must redo a flyover to see the change.
我希望当我点击按钮而不将鼠标悬停在它上面时，它会显示默认工具提示.
I want that when I click on the button and don't hover over it, it displays the default tooltip.
测试:
// 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() 函数.然后你可以附加一个监听器来监听鼠标离开.当鼠标离开时，您可以切换回工具提示.
You can change the tooltip while you’re hovering over the button by using Bootstap’s tooltip update() function followed by the show() function. Then you can attach a listener to listen for the mouse to leave. When the mouse leaves, you can switch the tooltip back.
一个注意事项:Bootstrap 的更新文档说功能更新元素工具提示的位置."它没有说它会更新文本，但它会更新.根据这个点击时更改 Twitter Bootstrap Tooltip 内容，曾经有是一个会更新文本的函数 fixTitle，但它不再可用(该函数可通过 _fixTitle 获得).
One note: Bootstrap’s documentation for update says the function "Updates the position of an element’s tooltip." It doesn’t say it will update the text, but it does. According to this Change Twitter Bootstrap Tooltip content on click, there used to be a function fixTitle that would update the text, but that’s no longer available (the function is available through _fixTitle).
对于 Pastebin 中的代码版本，使用 tooltipList[ ] 会比较复杂——您需要对一个按钮使用 [0]，对另一个按钮使用 [1].由于您正在创建单独的 ClipboardJS 实例，因此创建具有唯一名称的单独工具提示实例可能是最简单的，而不必跟踪哪个元素是 [0]，哪个是 [1].
For your code version in Pastebin, there’s a complication with using tooltipList[ ] – you would need to use [0] for one button and [1] for the other. Since you’re creating separate ClipboardJS instances, it’s probably easiest to create separate tooltip instances with unique names, rather than having to track which element is [0] and which is [1].
我更新了我的答案以支持两个按钮，每个按钮使用单独的元素和实例.在您的 Pastebin 代码中，您展示了您将要从容器(模态)复制内容，但模态目前不在您的示例中.
I’ve updated my answer to support two buttons using separate elements and instances for each. In your Pastebin code, you show you’re going to be copying the content from a container (a modal), but the modals are currently not in your example.
我还将所有内容都包含在一个自调用表达式中，以避免任何命名冲突并封装所有内容.
I also enclosed everything inside a self-invoking expression to avoid any naming conflicts and encapsulate everything.
为了更改模态的工具提示文本，需要在鼠标离开时专门隐藏工具提示.我不确定为什么模态与按钮不同，但由于工具提示是使用方法显示的，它似乎想要一种方法来隐藏它.
For changing the tooltip text for modals, the tooltip needs to be specifically hidden when the mouse leaves. I'm not sure why a modal is different from a button, but since the tooltip was shown using a method, it seems to want a method to hide it.
在鼠标离开后的回调函数中添加一行:tooltipShare.hide(); 和 tooltipDonation.hide(); 将隐藏工具提示.
Adding the line: tooltipShare.hide(); and tooltipDonation.hide(); to the callback functions after the mouse leaves will hide the tooltip.
要将带有撇号的 Copier le lien 切换到 Copier l'adresse，请将用于定义字符串的单引号更改为双引号.
To switch from Copier le lien to Copier l'adresse with an apostrophe, change from single quote marks for defining strings to double quote marks.
tooltipShareButton.setAttribute('data-original-title', 'Copier le lien');
tooltipShareButton.setAttribute("data-original-title", "Copier l'adresse");
因为 Copier l'adresse 比 Lien copié 长得多，所以对样式进行一些调整是有意义的.如果您可以将以下样式放在您的脑海中(或添加到其中一个 CSS 文件中)，以免它们被覆盖，它们将有助于使工具提示看起来更好.
Because Copier l'adresse is so much longer than Lien copié, it would make sense to make some adjustments to the styling. If you can put the below styles in your head (or add to one of the CSS files) somewhere so they won’t get overwritten, they’ll help the tooltip look better.
<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 不会让它消失)——但只要更新的工具提示内容长度相同或更长，它就会把它盖起来，当鼠标离开时，两个工具提示都会被删除.
这篇关于单击按钮时工具提示的文本如何更改?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
