1

I am trying to copy text to clipboard on click of button.

I am using below library for this but the only things lacking with that library is that it is not shown how to display tooltip when content is copied:

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

I have tried answers from below questions but those answer doesn't seems to work so i ended up using this above library:

AngularJS copy to clipboard

how to get clipboard data in angular JS

I want to show my tooltip exactly the way as shown on this below question answer:

Tooltips + Highlight Animation With Clipboard.js Click

halfer
  • 19,824
  • 17
  • 99
  • 186
I Love Stackoverflow
  • 6,738
  • 20
  • 97
  • 216

1 Answers1

1

So I kinda got it working.

Unfortunately we have to use some js to do it if you resort to using bootstrap tooltips.

Here is a plunkr that solves the problm.

Basically, boils down to these few lines of code:

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

Also, you should be using bootstrap version 3 instead of v4.

Updated Plunkr

Alok
  • 1,290
  • 1
  • 11
  • 21
  • Upvoted for your kind efforts towards helping me but when i copied once and then when i hover to that button it always shows copied but is it possible to create functionality like shown on this question :https://stackoverflow.com/questions/37381640/tooltips-highlight-animation-with-clipboard-js-click – I Love Stackoverflow Jul 17 '17 at 14:07
  • Thanks alot for the updated plunker but i dont want to mix angular js and jquery so is it possible to handle all this things in a directive though that directive will use jquery? – I Love Stackoverflow Jul 17 '17 at 14:40