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.
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).
Update
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].
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.
Update 2
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.
Adding the line: tooltipShare.hide(); and tooltipDonation.hide(); to the callback functions after the mouse leaves will hide the tooltip.
Update 3
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");
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>
When used in a modal, the initial tooltip doesn't go away (hide and dispose wouldn't make it go away) — but so long as the updated tooltip content is the same length or longer, it will cover it up, and both tooltips are removed when the mouse leaves.
