Question

我想结合使用Bootstrap 4，ClipboardJS和工具提示（PopperJS）。

到目前为止，我的代码正在运行：单击按钮时，“ data-clipboard-text”字段的值将保存在剪贴板中。但是工具提示不会显示也不会隐藏，因为我不知道如何在功能中添加正确的按钮。

HTML（在“ data-clipboard-text”字段中有n个按钮的列表，这些按钮具有不同的值）：

<button class="btn btn-secondary btn-sm" data-clipboard-text="25" data-toggle="tooltip" data-placement="top">Copy to clipboard</button>
<button class="btn btn-secondary btn-sm" data-clipboard-text="51" data-toggle="tooltip" data-placement="top">Copy to clipboard</button>
<button class="btn btn-secondary btn-sm" data-clipboard-text="178" data-toggle="tooltip" data-placement="top">Copy to clipboard</button>
[…] 
<button class="btn btn-secondary btn-sm" data-clipboard-text="2" data-toggle="tooltip" data-placement="top">Copy to clipboard</button>

JS：

<script type="text/javascript">

    // tooltip: enable all items with data-toggle=“tooltip“
    $(function () {
        $('[data-toggle="tooltip"]').tooltip({trigger:'click'})
    });

    function setTooltip(btn, message) {
        $(btn).tooltip('hide')
        .attr('data-original-title', message)
        .tooltip('show');
    }

    function hideTooltip(btn) {
        setTimeout(function() {
            $(btn).tooltip('hide');
            }, 1000);
    }

    // clipboard
    var btns = document.querySelectorAll('button');
    var clipboard = new ClipboardJS(btns);

    clipboard.on('success', function(e) {
        setTooltip(btns, 'Copied!');
        console.log(e);
    });

    clipboard.on('error', function(e) {
        hideTooltip(btns);
        console.log(e);
    });

</script>

Answer 1

正确的解决方案是以下代码。

HTML：

<button class="btn btn-secondary btn-sm" data-clipboard-text="22" data-toggle="tooltip" title="Kopiert!" data-placement="top">Copy to clipboard</button>

JS：

jQuery(document).ready(function () {

    $('[data-toggle="tooltip"]').tooltip({trigger:'click', delay: {show: 200, hide: 100}});

    function setTooltip(btn) {
        $(btn).tooltip('show');
    }

    $(function () {
        $(document).on('shown.bs.tooltip', function (e) {
            setTimeout(function () {
                $(e.target).tooltip('hide');
            }, 2000);
        });
    });

    var btns = document.querySelectorAll('button');
    var clipboard = new ClipboardJS(btns);

    clipboard.on('success', function(e) {
        setTooltip($(this).btns);
        console.log(e);
    });

});

已成功测试-具有数据属性“工具提示”的所有按钮将首先被激活。之后，如果您单击任何（！）按钮，将复制其数据剪贴板文本的值，并且在2秒钟（值可更改）后，即使您单击多个按钮，所有工具提示也会再次关闭。是的！

如何将工具提示放置在列表的右侧？

1 个答案: