【发布时间】：2021-07-20 05:07:26
【问题描述】：
我有 2 个网站：
- 带有 Bootstrap 5 的静态网站。
- 带有 Bootstrap 4 的 Drupal 8 站点。
我的问题与我之前的问题有关：
How does the text of the tooltip change when the button is clicked?
答案适用于 Bootstrap 5，但在控制台中使用 Drupal 8 和 Bootstrap 4 时出现错误。
我认为tooltip的初始化不正确。
我该如何解决这个问题？下面是用于 Bootstap 5 的代码和对 Bootstrap 4 的改编。
我刚刚把data-bs-original-title改成了data-original-title
我也修改了tooltip.js文件的代码
引导 5
工具提示.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));
引导程序 4
工具提示.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));
【问题讨论】：
标签： javascript twitter-bootstrap drupal tooltip drupal-8