如何在 Drupal 8 上重置 Bootstrap 4 个工具提示？
How to reset Bootstrap 4 Tooltips on Drupal 8?
我有 2 个网站：
- 静态网站 Bootstrap 5.
- 一个 Drupal 8 站点 Bootstrap 4.
我的问题与我之前的问题有关：
答案适用于 Bootstrap 5，但我在 Drupal 8 和 Bootstrap 4 的控制台中出现错误。
我认为tooltip的初始化不正确
我该如何解决这个问题？这是与 Bootstap 5 一起使用的代码以及 Bootstrap 4.
的改编版
我刚把data-bs-original-title改成了data-original-title
我也修改了tooltip.js文件的代码
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
enter image description here
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));
按照您使用 ClipboardJS 的方式复制模态框按钮的内容，使用 Bootstrap 的工具提示显示复制到剪贴板在 Bootstrap 上成功 5你提供的例子，我已经复制了 Bootstrap 4.
的函数
虽然 Bootstrap 5 具有工具提示功能作为 Bootstrap 的 JavaScript 的一部分，但 Bootstrap 4 扩展了 jQuery 来处理工具提示功能，所以我用 jQuery 函数替换了工具提示的 Bootstrap 5 个实例。
(function ($, doc, clip) {
var $shareBtn = $("#btn-clipboard-share");
var $donateBtn = $("#btn-clipboard-donation");
var clipboardShare;
var clipboardDonation;
// Initialize tooltips
$shareBtn.tooltip();
$donateBtn.tooltip();
clipboardShare = new clip("#btn-clipboard-share", {
container: doc.getElementById("modal-share")
});
clipboardShare.on("success", function () {
function restoreTitle() {
$shareBtn.tooltip("hide");
$shareBtn.attr("data-original-title", "Copier l'adresse");
$shareBtn.off("mouseleave.clipboard", restoreTitle);
}
$shareBtn.attr("data-original-title", "Lien copié");
$shareBtn.tooltip("update");
$shareBtn.tooltip("show");
$shareBtn.on("mouseleave.clipboard", restoreTitle);
});
clipboardShare.on("error", function () {
function restoreTitle() {
$shareBtn.tooltip("hide");
$shareBtn.attr("data-original-title", "Copier l'adresse");
$shareBtn.off("mouseleave.clipboard", restoreTitle);
}
$shareBtn.attr("data-original-title", "Erreur");
$shareBtn.tooltip("update");
$shareBtn.tooltip("show");
$shareBtn.on("mouseleave.clipboard", restoreTitle);
});
clipboardDonation = new clip("#btn-clipboard-donation", {
container: doc.getElementById("modal-donation")
});
clipboardDonation.on("success", function () {
function restoreTitle() {
$donateBtn.tooltip("hide");
$donateBtn.attr("data-original-title", "Copier l'adresse");
$donateBtn.off("mouseleave.clipboard", restoreTitle);
}
$donateBtn.attr("data-original-title", "Adresse copiée");
$donateBtn.tooltip("update");
$donateBtn.tooltip("show");
$donateBtn.on("mouseleave.clipboard", restoreTitle);
});
clipboardDonation.on("error", function () {
function restoreTitle() {
$donateBtn.tooltip("hide");
$donateBtn.attr("data-original-title", "Copier l'adresse");
$donateBtn.off("mouseleave.clipboard", restoreTitle);
}
$donateBtn.attr("data-original-title", "Erreur");
$donateBtn.tooltip("update");
$donateBtn.tooltip("show");
$donateBtn.on("mouseleave.clipboard", restoreTitle);
});
}(jQuery, document, ClipboardJS));
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>
<div class="container d-flex justify-content-center mt-5">
<!-- Buttons triggering modals -->
<button type="button" class="btn btn-outline-success mr-3" data-toggle="modal" data-target="#modal-share">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-share" viewBox="0 0 16 16">
<path d="M13.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5zm-8.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm11 5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"></path>
</svg> Partager
</button>
<button type="button" class="btn btn-outline-success ml-3" data-toggle="modal" data-target="#modal-donation">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-suit-heart-fill" viewBox="0 0 16 16">
<path d="M4 1c2.21 0 4 1.755 4 3.92C8 2.755 9.79 1 12 1s4 1.755 4 3.92c0 3.263-3.234 4.414-7.608 9.608a.513.513 0 0 1-.784 0C3.234 9.334 0 8.183 0 4.92 0 2.755 1.79 1 4 1z"></path>
</svg> Faire un don
</button>
<!-- Modals -->
<div class="modal fade show" id="modal-share" tabindex="-1" aria-labelledby="partager" aria-hidden="true" aria-modal="true" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="partager">Partager cette page</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p class="text-justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam expedita consectetur laudantium iusto necessitatibus minima.</p>
<button id="btn-clipboard-share" class="btn btn-outline-dark btn-sm w-100" data-toggle="tooltip" data-placement="top" title="" data-clipboard-text="https://www.example.com/fr/groupe/le-blog" data-original-title="Copier l'adresse">
https://www.example.com/fr/groupe/le-blog
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16">
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"></path>
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"></path>
</svg>
</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade show" id="modal-donation" tabindex="-1" aria-labelledby="donation" aria-hidden="true" aria-modal="true" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="donation">Faire un don</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="message-donation">
<p class="text-justify">Si le contenu de ce groupe vous plaît, vous pouvez faire un don à son l'auteur en Bitcoin (BTC).</p>
<p class="mb-3"><a href="https://www.example.com/btc/address/1A5GqrNbpo7xwurpt1VQVvcA5yzoEcgaFvff" rel="nofollow" target="_blank">Voir les transactions sur la Blockchain</a></p>
<h5>Adresse BTC :</h5>
<p><img class="img-fluid" src="https://via.placeholder.com/300x300.png?text=QR%20Code" alt="Sample QR Code">
</p>
<button id="btn-clipboard-donation" class="btn btn-outline-dark btn-sm text-break" data-toggle="tooltip" data-placement="top" title="" data-clipboard-text="1A5GqrNbpo7xwurpt1VQVvcA5yzoEcgaFvff" data-original-title="Copier l'adresse">
1A5GqrNbpo7xwurpt1VQVvcA5yzoEcgaFvff
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16">
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"></path>
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"></path>
</svg>
</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
我确实对代码进行了匿名处理，使用 example.com 代替了您的 URL，将 QR 码替换为灰度图像，并替换了地址哈希。
我有 2 个网站：
- 静态网站 Bootstrap 5.
- 一个 Drupal 8 站点 Bootstrap 4.
我的问题与我之前的问题有关：
答案适用于 Bootstrap 5，但我在 Drupal 8 和 Bootstrap 4 的控制台中出现错误。
我认为tooltip的初始化不正确
我该如何解决这个问题？这是与 Bootstap 5 一起使用的代码以及 Bootstrap 4.
的改编版我刚把data-bs-original-title改成了data-original-title
我也修改了tooltip.js文件的代码
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
enter image description here
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));
按照您使用 ClipboardJS 的方式复制模态框按钮的内容，使用 Bootstrap 的工具提示显示复制到剪贴板在 Bootstrap 上成功 5你提供的例子，我已经复制了 Bootstrap 4.
的函数虽然 Bootstrap 5 具有工具提示功能作为 Bootstrap 的 JavaScript 的一部分，但 Bootstrap 4 扩展了 jQuery 来处理工具提示功能，所以我用 jQuery 函数替换了工具提示的 Bootstrap 5 个实例。
(function ($, doc, clip) {
var $shareBtn = $("#btn-clipboard-share");
var $donateBtn = $("#btn-clipboard-donation");
var clipboardShare;
var clipboardDonation;
// Initialize tooltips
$shareBtn.tooltip();
$donateBtn.tooltip();
clipboardShare = new clip("#btn-clipboard-share", {
container: doc.getElementById("modal-share")
});
clipboardShare.on("success", function () {
function restoreTitle() {
$shareBtn.tooltip("hide");
$shareBtn.attr("data-original-title", "Copier l'adresse");
$shareBtn.off("mouseleave.clipboard", restoreTitle);
}
$shareBtn.attr("data-original-title", "Lien copié");
$shareBtn.tooltip("update");
$shareBtn.tooltip("show");
$shareBtn.on("mouseleave.clipboard", restoreTitle);
});
clipboardShare.on("error", function () {
function restoreTitle() {
$shareBtn.tooltip("hide");
$shareBtn.attr("data-original-title", "Copier l'adresse");
$shareBtn.off("mouseleave.clipboard", restoreTitle);
}
$shareBtn.attr("data-original-title", "Erreur");
$shareBtn.tooltip("update");
$shareBtn.tooltip("show");
$shareBtn.on("mouseleave.clipboard", restoreTitle);
});
clipboardDonation = new clip("#btn-clipboard-donation", {
container: doc.getElementById("modal-donation")
});
clipboardDonation.on("success", function () {
function restoreTitle() {
$donateBtn.tooltip("hide");
$donateBtn.attr("data-original-title", "Copier l'adresse");
$donateBtn.off("mouseleave.clipboard", restoreTitle);
}
$donateBtn.attr("data-original-title", "Adresse copiée");
$donateBtn.tooltip("update");
$donateBtn.tooltip("show");
$donateBtn.on("mouseleave.clipboard", restoreTitle);
});
clipboardDonation.on("error", function () {
function restoreTitle() {
$donateBtn.tooltip("hide");
$donateBtn.attr("data-original-title", "Copier l'adresse");
$donateBtn.off("mouseleave.clipboard", restoreTitle);
}
$donateBtn.attr("data-original-title", "Erreur");
$donateBtn.tooltip("update");
$donateBtn.tooltip("show");
$donateBtn.on("mouseleave.clipboard", restoreTitle);
});
}(jQuery, document, ClipboardJS));
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>
<div class="container d-flex justify-content-center mt-5">
<!-- Buttons triggering modals -->
<button type="button" class="btn btn-outline-success mr-3" data-toggle="modal" data-target="#modal-share">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-share" viewBox="0 0 16 16">
<path d="M13.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5zm-8.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm11 5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"></path>
</svg> Partager
</button>
<button type="button" class="btn btn-outline-success ml-3" data-toggle="modal" data-target="#modal-donation">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-suit-heart-fill" viewBox="0 0 16 16">
<path d="M4 1c2.21 0 4 1.755 4 3.92C8 2.755 9.79 1 12 1s4 1.755 4 3.92c0 3.263-3.234 4.414-7.608 9.608a.513.513 0 0 1-.784 0C3.234 9.334 0 8.183 0 4.92 0 2.755 1.79 1 4 1z"></path>
</svg> Faire un don
</button>
<!-- Modals -->
<div class="modal fade show" id="modal-share" tabindex="-1" aria-labelledby="partager" aria-hidden="true" aria-modal="true" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="partager">Partager cette page</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p class="text-justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam expedita consectetur laudantium iusto necessitatibus minima.</p>
<button id="btn-clipboard-share" class="btn btn-outline-dark btn-sm w-100" data-toggle="tooltip" data-placement="top" title="" data-clipboard-text="https://www.example.com/fr/groupe/le-blog" data-original-title="Copier l'adresse">
https://www.example.com/fr/groupe/le-blog
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16">
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"></path>
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"></path>
</svg>
</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade show" id="modal-donation" tabindex="-1" aria-labelledby="donation" aria-hidden="true" aria-modal="true" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="donation">Faire un don</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="message-donation">
<p class="text-justify">Si le contenu de ce groupe vous plaît, vous pouvez faire un don à son l'auteur en Bitcoin (BTC).</p>
<p class="mb-3"><a href="https://www.example.com/btc/address/1A5GqrNbpo7xwurpt1VQVvcA5yzoEcgaFvff" rel="nofollow" target="_blank">Voir les transactions sur la Blockchain</a></p>
<h5>Adresse BTC :</h5>
<p><img class="img-fluid" src="https://via.placeholder.com/300x300.png?text=QR%20Code" alt="Sample QR Code">
</p>
<button id="btn-clipboard-donation" class="btn btn-outline-dark btn-sm text-break" data-toggle="tooltip" data-placement="top" title="" data-clipboard-text="1A5GqrNbpo7xwurpt1VQVvcA5yzoEcgaFvff" data-original-title="Copier l'adresse">
1A5GqrNbpo7xwurpt1VQVvcA5yzoEcgaFvff
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16">
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"></path>
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"></path>
</svg>
</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
我确实对代码进行了匿名处理，使用 example.com 代替了您的 URL，将 QR 码替换为灰度图像，并替换了地址哈希。