Clipboard and Popup (Semantic UI)

I don’t know why I am so obsessed about having a tooltip event triggered after successfully copying contents to clipboard with clipboardjs, but I guess it teaches an amateur like me to figure out ways in having this feature improved with trial and error processes.

I was unhappy with the previous coding that I finalized with bootstrap, so now that I am having Semantic UI served as the web framework for my blog, I am utilizing its popup module for this particular purpose; tooltips display following a click on the copy to clipboard button.

Please note though that I am not a programmer. Never have I received any formal education in programming so far and as such, I am very much amateurish in this.

So without further ado, I present the codes that work the way I want it to for now (Hoo, how I wish it can be as neat as the one produced in Semantic UI website! Sadly, it is not.)

1. Demo1 (clipboard with dynamic target area specified):-
   JS HTML CSS Result

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
   
   <script>
   $('.demo1')
   .popup({
       content: 'Copy to clipboard',
       //variation: 'inverted',
       position: 'left center',
   })
   
   var clipboard = new ClipboardJS('.demo1', {
       target: function(trigger) {
           return trigger.parentNode.nextElementSibling;
       }
   })
   
   clipboard.on('success', function(e) {
       e.clearSelection();
       $(e.trigger)
       .popup('change content', 'Copied')
   })
   
   clipboard.on('error', function(e) {
       $(e.trigger)
       .popup('change content', 'Please copy manually')
   })
   </script>

   <div>
   
   <!-- Trigger -->
   <button class="button-demo">
   <i class="copy icon demo1" data-clipboard-target="#clip"></i>
   </button>
   
   <!-- Target Area -->
   <div id="clip" class="clip-demo">
   "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam odio odio, accumsan tristique fringilla non, ornare non sem. In mauris elit, interdum nec tortor in, pharetra scelerisque ante. Vivamus commodo, velit sit amet dapibus dictum, quam ante condimentum quam, id commodo elit justo blandit nibh. Nullam maximus id diam ac rutrum. Suspendisse pulvinar justo eros, id placerat ex sodales aliquet. Ut sapien metus, egestas vel nisl in, pharetra sagittis dolor. Nam et ultrices mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."
   </div>
   
   </div>

   <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css" rel="stylesheet" />
   
   /* CUSTOM CSS */ 
   .clip-demo {
     font-size: 95%;
     padding: .5em;
     display: flex;
     line-height: normal;
     width: auto;
     margin: auto;
     margin-bottom: 2em;
     border: 1px solid #ccc;
     border-radius: 2px;
   }
   
   .button-demo {
     padding: .45em .25em .4em .3em;
     color: #fff;
     background: #008aa0;
     border: 1px solid #eee;
     border-radius: 2px;
     float: right;
     overflow: hidden;
   }

   "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam odio odio, accumsan tristique fringilla non, ornare non sem. In mauris elit, interdum nec tortor in, pharetra scelerisque ante. Vivamus commodo, velit sit amet dapibus dictum, quam ante condimentum quam, id commodo elit justo blandit nibh. Nullam maximus id diam ac rutrum. Suspendisse pulvinar justo eros, id placerat ex sodales aliquet. Ut sapien metus, egestas vel nisl in, pharetra sagittis dolor. Nam et ultrices mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."


2. Demo2 (clipboard with dynamic text attribute specified):-
   JS HTML Result

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
   
   <script>
   var clipboard = new ClipboardJS('.demo2', {
       text: function(trigger) {
           return trigger.getAttribute('aria-label');
       }
   })
   
   clipboard.on('success', function(e) {
       $(e.trigger)
       .attr('title', 'Copied')
       .popup('fixTitle')
       .popup({
       onCreate: function() {
         $(e.trigger)
           .popup({
               //variation: 'inverted',
               position: 'right center',
           })
               .popup('toggle')
         ;
       }
     })
       .popup('show')
       .popup('toggle')
   })
   
   clipboard.on('error', function(e) {
       $(e.trigger)
       .attr('title', 'Unsupported in this browser')
       .popup('fixTitle')
       .popup({
       onCreate: function() {
         $(e.trigger)
           .popup({
               //variation: 'inverted',
               position: 'right center',
           })
               .popup('toggle')
         ;
       }
     })
       .popup('show')
       .popup('toggle')
   })
   </script>

   <!-- Trigger -->
   <button class="ui button demo2" aria-label="This is the text copied when clicking the button">
   Copy to clipboard
   </button>

   Copy to clipboard