单击按钮时工具提示的文本如何变化？

Question

我有一个 Bootstrap 5 主题的网站。我创建了一个按钮来复制 url.

有效，没问题。

我希望当我点击按钮时，工具提示显示“Lien copié”。目前我们必须重做天桥才能看到变化。
我希望当我点击按钮而不是将鼠标悬停在它上面时，它会显示默认的工具提示。

测试：

// 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>

Answer 1

您可以在将鼠标悬停在按钮上时更改工具提示，方法是使用 Bootstap 的工具提示 update() 函数，然后使用 show() 函数。然后你可以附加一个监听器来监听鼠标是否离开。当鼠标离开时，您可以将工具提示切换回来。

请注意：Bootstrap 的 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，曾经有一个函数 fixTitle 可以更新文本，但现在不再可用（该函数可通过 _fixTitle 使用）。

更新

对于您在 Pastebin 中的代码版本，使用 tooltipList[ ] 会很复杂 – 您需要对一个按钮使用 [0]，对另一个按钮使用 [1]。由于您要创建单独的 ClipboardJS 实例，因此创建具有唯一名称的单独工具提示实例可能最简单，而不必跟踪哪个元素是 [0] 哪个是 [1]。

我更新了我的答案以支持两个按钮，每个按钮使用单独的元素和实例。在您的 Pastebin 代码中，您表明您将要从容器（模态）复制内容，但模态当前不在您的示例中。

我还将所有内容都包含在自调用表达式中以避免任何命名冲突并封装所有内容。

更新 2

要更改模态框的工具提示文本，需要在鼠标离开时专门隐藏工具提示。我不确定为什么模式与按钮不同，但由于工具提示是使用一种方法显示的，因此似乎需要一种方法来隐藏它。

在鼠标离开后的回调函数中添加行：tooltipShare.hide(); 和 tooltipDonation.hide(); 将隐藏工具提示。

更新 3

要使用撇号从 Copier le lien 切换到 Copier l'adresse，请将用于定义字符串的单引号更改为双引号。

tooltipShareButton.setAttribute('data-original-title', 'Copier le lien');

tooltipShareButton.setAttribute("data-original-title", "Copier l'adresse");

因为 Copier l'adresse 比 Lien copié 长得多，所以对样式进行一些调整是有意义的。如果您可以将以下样式放在头脑中（或添加到 CSS 文件之一）以免它们被覆盖，它们将帮助工具提示看起来更好。

<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>

在模式中使用时，初始工具提示不会消失（隐藏和处置不会使其消失）——但只要更新的工具提示内容长度相同或更长的时间，它会覆盖它，并且当鼠标离开时，两个工具提示都会被删除。

单击按钮时工具提示的文本如何变化？

How does the text of the tooltip change when the button is clicked?

javascript

html

twitter-bootstrap

tooltip

clipboard

更新

更新 2

更新 3