javascript - 工具提示 + 使用 Clipboard.js Click 突出显示动画

Question

我已成功安装clipboard.js并已获得文本片段，单击即可复制到剪贴板。我将把这些文本片段(或它们所在的“btn”)嵌套在表格的单元格中。

我的挑战:

我需要文本片段来给我一个工具提示“已复制!”消息，以便人们知道它们是可点击的。 Clipboard.js 文档页面就是一个很好的例子 - 单击任意剪切或复制按钮即可查看工具提示消息。

来自 Clipboard.js 的文档:

Although copy/cut operations with execCommand aren't supported on Safari yet (including mobile), it gracefully degrades because Selection is supported.

That means you can show a tooltip saying Copied! when success event is called and Press Ctrl+C to copy when error event is called because the text is already selected.

我并不是特别擅长 JS(我花了几个小时才走到这一步)。所以我陷入了死胡同...能够在 WP 上安装所有内容，将脚本排入队列，并添加文本/功能:

 <!-- 1. Define some markup -->
    <div id="btn" data-clipboard-text="1">
        <span>text to click</span>
    </div>

    <!-- 2. Include library -->
    <script src="/path/to/dist/clipboard.min.js"></script>

    <!-- 3. Instantiate clipboard by passing a HTML element -->
    <script>
    var btn = document.getElementById('btn');
    var clipboard = new Clipboard(btn);

    clipboard.on('success', function(e) {
    console.log(e);
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);
    });

    clipboard.on('error', function(e) {
        console.log(e);
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });
    </script>

我应该添加什么？谢谢!

Answer 1

似乎您想要做的就是将 Clipboard.js 与工具提示解决方案集成。

以下是如何使用 Bootstrap 的工具提示来实现这一点。

// Tooltip

$('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);
}

// Clipboard

var clipboard = new Clipboard('button');

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>
<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>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<button class="btn btn-primary" data-clipboard-text="It worked!">Click me</button>
<button class="btn btn-primary" data-clipboard-text="It worked again!">Click me</button>