在 clipboard.js 中使用多个按钮时的单独工具提示

Question

我有一个包含两个 textarea 和两个 button 的页面，它们在按下时分别将每个 textarea 的内容复制到用户的剪贴板。当按下按钮并且复制成功时，工具提示会显示 Copied!。按照我之前的设置方式，当按下 1 个按钮时，将显示两个按钮的工具提示，而不仅仅是按下的按钮（参见 here）。

$('button').tooltip({
  trigger: 'click',
  placement: 'bottom'
});

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

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

var clipboard = new Clipboard('button');

clipboard.on('success', function(e) {
  e.clearSelection();
  setTooltip('Copied!');
  hideTooltip();
});

clipboard.on('error', function(e) {
  e.clearSelection();
  setTooltip('Failed!');
  hideTooltip();
});

在基本上复制上面的代码后，我设法使工具提示仅针对单击的按钮显示（参见 here），但这似乎是一种非常初学者的方法它（我就是）。

Answer 1

您不需要创建 Bootstrap 工具提示的两个瞬间，因为 Clipboard.js returns 您单击的按钮 (e.trigger)。

$('button').tooltip({
  trigger: 'click',
  placement: 'bottom'
});

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

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

var clipboard = new Clipboard('button');

clipboard.on('success', function(e) {
  e.clearSelection();
  setTooltip(e.trigger, 'Copied!');
  hideTooltip(e.trigger);
});

clipboard.on('error', function(e) {
  e.clearSelection();
  setTooltip(e.trigger, 'Failed!');
  hideTooltip(e.trigger);
});

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>


<div class="row">
    <div class="col-sm-12">
        <div class="panel-body text-center">
            <h4>Textarea 1</h4>
            <textarea id="testarea1">Some text in testarea 1...</textarea><br><br>
            <button class="btn btn-primary" data-clipboard-target="#testarea1">Copy to clipboard</button>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-12">
        <div class="panel-body text-center">
            <h4>Textarea 2</h4>
            <textarea id="textarea2">Some text in textarea 2...</textarea><br><br>
            <button class="btn btn-primary" data-clipboard-target="#textarea2">Copy to clipboard</button>
        </div>
    </div>
</div>

Answer 2

相同的解决方案，但示例略有不同：可能是高级示例：

<ul>
    <li>
        <button type="button" class="btn-tooltip" data-clipboard-text="e1" >E1</button>
    </li>
    <li>
        <button type="button" class="btn-tooltip" data-clipboard-text="e2" >E2</button>
    </li>
</ul>

还有可爱的javascript:

<script>
    $('.btn-tooltip').tooltip({
        trigger: 'click',
        placement: 'bottom'
    });

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

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

    var clipboard = new ClipboardJS('.btn-tooltip');

    clipboard.on('success', function(e) {
        e.clearSelection();
        setTooltip(e.trigger, 'Copied!');
        hideTooltip(e.trigger);
    });

    clipboard.on('error', function(e) {
        e.clearSelection();
        setTooltip(e.trigger, 'Failed!');
        hideTooltip(e.trigger);
    });
</script>

点

new ClipboardJS('.btn-tooltip') 并非所有按钮。关注.

在 clipboard.js 中使用多个按钮时的单独工具提示

Individual tooltip when using multiple buttons with clipboard.js

javascript

jquery

clipboard.js

点