如何在单击锚点时更改工具提示？

Question

我正在开发一种设计，用户可以单击 Glyphicon 锚点，它将文本复制到剪贴板。我希望单击按钮时工具提示会发生变化。因此，当他们将鼠标悬停在按钮上时，它将显示“复制到剪贴板”，但单击它后，工具提示将更改为“已复制！”。

<div style='margin: 20px;'>
    <a id='copy-button' href='#' class='my-tool-tip' data-toggle="tooltip"
       data-placement="right" title="Copy to Clipboard">
        <i class='glyphicon glyphicon-link'></i>
    </a>
</div>

这就是 GitHub 的 UI 在分叉存储库时的行为方式。

最终结果

我可以使用复制功能，并且初始悬停工具提示，我无法弄清楚如何在单击时进行更改。我还创建了一个 jsfiddle 来帮助描述我所说的内容。预先感谢！

http://jsfiddle.net/t9Ku6/381/

Answer 1

您正在寻找的是 jQuery 中的

click()

事件，它会更新工具提示的

data-original-title

属性：

$("a.my-tool-tip").click(function(){
    $("a.my-tool-tip").attr('data-original-title', 'Copied');
});

请注意，获取新标题可能会有点问题，因此您可能需要关闭并再次打开工具提示：

$("a.my-tool-tip").click(function(){
    $("a.my-tool-tip").attr('data-original-title', 'Copied');
    $("a.my-tool-tip").tooltip('show');
});

我创建了一个小提琴来展示这个here。

Answer 2

为了让你达到同样的效果，你可以使用这个 jQuery 片段：

$("a.my-tool-tip").tooltip();
$("#copy-button").on('click', function() {
  var tooltip = $(this);
  tooltip.attr('data-original-title', 'Copied!');
  $("a.my-tool-tip").tooltip('show');
});

要切换工具提示的视图，您只需使用

.show()

。

这是一个正在工作的小提琴。

Answer 3

jQuery 支持在元素上设置 click 函数。将其与一些引导程序工具提示方法结合起来，你就很成功了。

jQuery

$('#copy-button').click(function(){
   $(this).attr( "data-original-title", "Copied!" );
   $(this).tooltip('show');
})

jsfiddle

Answer 4

使用 Bootstrap 5.3.3 css/js 包 JS 包有 popper，用于工具提示、jquery 3.7.1、font-awesome 5.3

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

$(function () {
            $('[data-bs-toggle="tooltip"]').tooltip()
        })
        
        function copyLink(copyElement){
            const tooltip = bootstrap.Tooltip.getInstance('#'+copyElement) // Returns a Bootstrap tooltip instance
            var copyText = document.getElementById(copyElement);
            navigator.clipboard.writeText(copyText.dataset.clipboard);
            //console.log("Copied the text: " + copyText.dataset.clipboard);
            tooltip.setContent({ '.tooltip-inner': 'Copied!' });

            $('#'+copyElement).show().delay(1000).promise().done(function(){
                console.log("delayed");
                tooltip.setContent({ '.tooltip-inner': 'Copy Link to Item' });
            });
        }

Html 元素

<button class="btn btn-primary" onclick="copyLink('copyLink');" id="copyLink" data-clipboard="TEXT THAT WILL BE COPIED" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Copy Link to Item"><i class="fas fa-copy"></i></button>