使用Clipboard.js的工具提示+突出显示动画单击 [英] Tooltips + Highlight Animation With Clipboard.js Click

问题描述

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

I've successfully installed clipboard.js and have gotten snippets of text to copy to the clipboard upon click. I'm going to be nesting these snippets of text (or the "btn"s they're within) in the cells of a table.

我的挑战

我需要文本摘录给我一个工具提示已复制！"消息，以便人们知道他们是可点击的.一个很好的例子是在剪贴板.js文档页面上-单击剪切或复制的任何按钮以查看工具提示消息.

I need the snippets of text to give me a Tooltip "Copied!" message so that people are aware they are clickable. A great example of this is on the clipboard.js documentation page -- click on any of the buttons that cut or copy to see the tooltip message.

从剪贴板.js的文档中:

From clipboard.js' documentation:

尽管不支持使用execCommand进行复制/剪切操作Safari(包括移动设备)尚可正常降级，因为支持选择.

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

这意味着您可以显示提示已复制的工具提示！当成功事件是被调用，并在发生错误事件时按Ctrl + C复制，因为文本已被选中.

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上安装所有内容，使脚本入队，并添加文本/功能:

I'm not particularly adept at JS (it took me a few hours to get this far). So I'm at a dead end... was able to install everything on WP, enqueue the script, and add the text/ functionality:

 <!-- 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>

我应该添加什么?谢谢！

What should I add? Thanks!

推荐答案

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

Seems like all you want to do is integrating Clipboard.js with a Tooltip solution.

因此，您可以使用Bootstrap的工具提示来完成此操作.

So here's how you can accomplish that using Bootstrap's Tooltip.

// 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>

这篇关于使用Clipboard.js的工具提示+突出显示动画单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！