Question

点击按钮后，如果您将鼠标悬停在按钮工具提示上，则会显示“已复制！”。怎么才能只有点击按钮才显示？

$('.btn').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');
  }, 1500);
}

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

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/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-primary" data-clipboard-text="Hello World!" id="copybtn" onclick="new ClipboardJS(&quot;.btn&quot;, document.getElementById(&quot;copybtn&quot;));" type="button"><i class="fa fa-copy" role="presentation" aria-label="copy icon"></i> Copy to Clipboard</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

Answer 1

这对我有用 -

function disposeTooltip(btn) {
      setTimeout(function() {
        $(btn).tooltip('destroy');
      }, 1500);
    }

然后在 clipboard.on( ) 中添加以下内容 -

 disposeTooltip(e.trigger);

单击时触发工具提示

1 个答案: