如何将工具提示放置到列表的右侧项目？

Question

我想引导4，ClipboardJS和工具提示（PopperJS）相结合。

我的代码是工作迄今：当我点击一个按钮，现场“数据剪贴板文本”的值保存在剪贴板中。但提示不显示出来，并没有隐瞒，因为我不知道如何把在右边的按钮进入功能。

HTML（有与该领域的“数据剪贴板文本”不同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秒后（值改变的）所有的提示再次关闭，即使你点击多个按钮。是啊！