In relation to my  previous entry of the same subject matter, I finally am able to finalize the code which makes the popup functionality works exactly how I want it to where it brings the following features:-
'Copy to clipboard' tooltip displays upon hovering over the button; Ability to have the button 'auto-' triggered and clicked without having to bring the cursor to the button itself as I utilize Vimium extension for Chromium browser.
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.
This is probably going to be the last entry posted before I go through a hectic phase as a mom to a newborn and a toddler.
I mentioned in one of my previous entries that it would be fun if there is a tooltip displayed following the click on a clipboard button that lets us copy text.
Please note though that I have no intention of using it as a replacement to my initial setting of showing the tooltips.
UPDATE! I decided to drop the below functions. I just use whatever applicable/available with Hugo Built-in Functions and Clipboard.js. Please refer to the JS section below. SYNTAX HIGHLIGHTING FUNCTION I tried several methods available as described in Hugo documentation for [Syntax Highlighting] function on my blog. My first attempt was the pre-processed server side approach using  Pygments, an external Python-based program. I installed Pygments through pip install, not realizing that Arch has it provided under its package manager called  pygmentize.