【问题标题】:How to display tooltip when content is copied to clipboard?将内容复制到剪贴板时如何显示工具提示?
【发布时间】:2017-07-17 13:06:31
【问题描述】:

我正在尝试通过单击按钮将文本复制到剪贴板。

我为此使用下面的库,但该库唯一缺少的是它没有显示在复制内容时如何显示工具提示:

https://www.npmjs.com/package/angular-clipboard

我尝试了以下问题的答案,但这些答案似乎不起作用,所以我最终使用了上面的这个库:

AngularJS copy to clipboard

how to get clipboard data in angular JS

我想完全按照以下问题答案所示的方式显示我的工具提示:

Tooltips + Highlight Animation With Clipboard.js Click

【问题讨论】:

  • 你想在哪里显示工具提示?
  • @Alok 我已经更新了我的问题以包括我想要显示我的工具提示的位置

标签: javascript angularjs


【解决方案1】:

所以我有点让它工作了。

不幸的是,如果您使用引导工具提示,我们必须使用一些 js 来做到这一点。

这是解决问题的plunkr

基本上,归结为这几行代码:

 var myEl = angular.element( document.querySelector( '#copyButton' ) );
  myEl.attr('title', 'Copied!')
      .tooltip('fixTitle')
      .tooltip('show');

  myEl.attr('title',"Copied");

  myEl.on('hidden.bs.tooltip', function () {
    // do something…
    myEl.attr('title', $scope.copyButtonToolTip)
          .tooltip('fixTitle');
  });

另外,您应该使用引导程序版本 3 而不是 v4。

Updated Plunkr

【讨论】:

  • 赞成您为帮助我所做的努力,但是当我复制一次然后当我将鼠标悬停在该按钮上时,它总是显示已复制,但是否可以创建像这个问题上所示的功能:stackoverflow.com/questions/37381640/…
  • 非常感谢更新的 plunker,但我不想混合使用 angular js 和 jquery,所以尽管该指令将使用 jquery,但是否可以在指令中处理所有这些事情?
猜你喜欢
  • 1970-01-01
  • 2020-12-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2010-10-18
  • 1970-01-01
相关资源
最近更新 更多