I have 2 websites:
- A static website with Bootstrap 5.
- A Drupal 8 site with Bootstrap 4.
My question relates to my previous question :
How does the text of the tooltip change when the button is clicked?
The answer works for Bootstrap 5 but I have an error in the console with Drupal 8 and Bootstrap 4.
I think the initialization of tooltip is not correct.
How can I correct this problem? Here is the code used with Bootstap 5 and an adaptation for Bootstrap 4.
I just changed data-bs-original-title to data-original-title
I also modified the code of the tooltip.js file
BOOTSTRAP 5
tooltip.js
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
btn-clipboard.js
(function (doc, clip, boot) {
var tooltipShareButton = doc.getElementById('btn-clipboard-share');
var tooltipShare = new boot.Tooltip(tooltipShareButton);
var clipboardShare = new clip('#btn-clipboard-share', {
container: doc.getElementById('modal-share')
});
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) {
tooltipShareButton.setAttribute('data-bs-original-title', 'Erreur');
function restoreTitle(e) {
tooltipShareButton.setAttribute('data-bs-original-title', 'Copier le lien');
tooltipShareButton.removeEventListener('mouseleave', restoreTitle);
}
tooltipShare.update();
tooltipShare.show();
tooltipShareButton.addEventListener('mouseleave', restoreTitle);
});
var tooltipDonationButton = doc.getElementById('btn-clipboard-donation');
var tooltipDonation = new boot.Tooltip(tooltipDonationButton);
var clipboardDonation = new clip('#btn-clipboard-donation', {
container: doc.getElementById('modal-donation')
});
clipboardDonation.on('success', function() {
function restoreTitle() {
tooltipDonation.hide();
tooltipDonationButton.setAttribute('data-bs-original-title', "Copier ladresse");
tooltipDonationButton.removeEventListener('mouseleave', restoreTitle);
}
tooltipDonationButton.setAttribute('data-bs-original-title', 'Adresse copiée');
tooltipDonation.hide();
tooltipDonation.update();
tooltipDonation.show();
tooltipDonationButton.addEventListener('mouseleave', restoreTitle);
});
clipboardDonation.on('error', function(e) {
function restoreTitle(e) {
tooltipDonation.hide();
tooltipDonationButton.setAttribute('data-bs-original-title', 'Copier ladresse');
tooltipDonationButton.removeEventListener('mouseleave', restoreTitle);
}
tooltipDonationButton.setAttribute('data-bs-original-title', 'Erreur');
tooltipDonation.hide();
tooltipShare.update();
tooltipShare.show();
tooltipDonationButton.addEventListener('mouseleave', restoreTitle);
});
}(document, ClipboardJS, bootstrap));
BOOTSTRAP 4
tooltip.js
(function ($) {
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
})(jQuery);
btn-clipboard.js
(function (doc, clip, boot) {
var tooltipShareButton = doc.getElementById('btn-clipboard-share');
var tooltipShare = new boot.Tooltip(tooltipShareButton);
var clipboardShare = new clip('#btn-clipboard-share', {
container: doc.getElementById('modal-share')
});
clipboardShare.on('success', function(e) {
function restoreTitle(e) {
tooltipShare.hide();
tooltipShareButton.setAttribute('data-original-title', 'Copier le lien');
tooltipShareButton.removeEventListener('mouseleave', restoreTitle);
}
tooltipShareButton.setAttribute('data-original-title', 'Lien copié');
tooltipShare.update();
tooltipShare.show();
tooltipShareButton.addEventListener('mouseleave', restoreTitle);
});
clipboardShare.on('error', function(e) {
tooltipShareButton.setAttribute('data-original-title', 'Erreur');
function restoreTitle(e) {
tooltipShareButton.setAttribute('data-original-title', 'Copier le lien');
tooltipShareButton.removeEventListener('mouseleave', restoreTitle);
}
tooltipShare.update();
tooltipShare.show();
tooltipShareButton.addEventListener('mouseleave', restoreTitle);
});
var tooltipDonationButton = doc.getElementById('btn-clipboard-donation');
var tooltipDonation = new boot.Tooltip(tooltipDonationButton);
var clipboardDonation = new clip('#btn-clipboard-donation', {
container: doc.getElementById('modal-donation')
});
clipboardDonation.on('success', function() {
function restoreTitle() {
tooltipDonation.hide();
tooltipDonationButton.setAttribute('data-original-title', "Copier ladresse");
tooltipDonationButton.removeEventListener('mouseleave', restoreTitle);
}
tooltipDonationButton.setAttribute('data-original-title', 'Adresse copiée');
tooltipDonation.hide();
tooltipDonation.update();
tooltipDonation.show();
tooltipDonationButton.addEventListener('mouseleave', restoreTitle);
});
clipboardDonation.on('error', function(e) {
function restoreTitle(e) {
tooltipDonation.hide();
tooltipDonationButton.setAttribute('data-original-title', 'Copier ladresse');
tooltipDonationButton.removeEventListener('mouseleave', restoreTitle);
}
tooltipDonationButton.setAttribute('data-original-title', 'Erreur');
tooltipDonation.hide();
tooltipShare.update();
tooltipShare.show();
tooltipDonationButton.addEventListener('mouseleave', restoreTitle);
});
}(document, ClipboardJS, bootstrap));
