【问题标题】:How does the text of the tooltip change when the button is clicked?单击按钮时,工具提示的文本如何变化?
【发布时间】:2021-04-24 20:41:31
【问题描述】:

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

可以,没问题。

  1. 我希望当我单击按钮时,工具提示会显示“Lien copié”。目前我们必须重做一个天桥才能看到变化。

  2. 我希望当我点击按钮而不是将鼠标悬停在它上面时,它会显示默认工具提示。

测试:

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

【问题讨论】:

    标签: javascript html twitter-bootstrap tooltip clipboard


    【解决方案1】:

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

    注意:Bootstrap 的 documentation for update 表示功能“更新元素工具提示的位置”。它并没有说它会更新文本,但确实会。根据这个Change Twitter Bootstrap Tooltip content on click,曾经有一个函数 fixTitle 可以更新文本,但不再可用(该函数通过 _fixTitle 可用)。

    更新

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

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

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

    更新 2

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

    鼠标离开后在回调函数中添加tooltipShare.hide();tooltipDonation.hide();这行会隐藏tooltip。

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

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

    【讨论】:

    • 谢谢,我测试了你的答案,它有效。我必须将它应用于 2 个模态窗口中的 2 个按钮。此代码是否正确 pastebin.com/P2Wt1ush
    • 我已经为您的 Pastebin 更新了我的答案——简短的回答是代码无法工作,因为它使用了相同的 [0] 元素。我认为做单独的实例而不是使用数组会更容易维护。我很想知道它是如何与你的模态一起运行的。
    • 行为很奇怪。如果我单击按钮,则会显示工具提示,但如果我不悬停按钮,它不会消失。
    • 看来mouseleave不足以关闭工具提示,但添加特定指令来隐藏工具提示似乎有效。我已经从您的page 更新了代码。
    • 谢谢你,它是完美的。我有最后一个问题,在这一行tooltipDonationButton.setAttribute('data-original-title', 'Copier le lien'); 我想用Copier l'adresse 替换Copier le lien' 字符有问题。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-08-07
    • 1970-01-01
    • 2016-05-06
    • 2011-05-19
    • 1970-01-01
    相关资源
    最近更新 更多