jquery 剪贴板插件和 bootstrap 3 工具提示

Question

我正在使用剪贴板插件HERE

我想修改剪贴板成功事件上的 bootstrap 3 工具提示标题，但出现错误 "TypeError: e.trigger.tooltip is not a function"

<div class="panel panel-default">
  <div class="panel-body">
    <p>
      USERNAME : <a href="#" title="Copy" class="btn-copy" data-clipboard-text="foo">foo</a>
      <br />
      PASSWORD : <a href="#" title="Copy" class="btn-copy" data-clipboard-text="bar">bar</a>
    </p>
  </div>
</div>

JS

$(".btn-copy").tooltip({
  placement: 'right'
});

clipboard.on('success', function(e) {
  e.clearSelection();
  console.log(e.trigger); -->//<a class="btn-copy" data-clipboard-text="foo" title="" href="#" data-original-title="Copy" aria-describedby="tooltip870310">

  e.trigger.tooltip({ title: 'Copied' });
});

clipboard.on('error', function(e) {
  console.log(e);
});

JSFIDDLE

如何解决这个问题？谢谢

Answer 1

首先 e.trigger 是 DOM 元素而不是 jQuery 元素。所以你需要像这样包装它 $(e.trigger) 这是那里的工作代码 :

$(e.trigger).attr('title', 'Copied').tooltip('fixTitle').tooltip('show');

jquery 剪贴板插件和 bootstrap 3 工具提示

jquery clipboard plugin and bootstrap 3 tooltip

clipboard

jquery

twitter-bootstrap