#clipboardjs

[Finalized] Clipboard and Popup (Semantic UI)
Official Snippet Used

In relation to my [1] 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.


Clipboard and Popup (Semantic UI)
An improved experimental tooltip

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.


Clipboard and Tooltip (Bootstrap)
An Experiment

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.


Syntax Highlighting and Copy Function in Hugo
Notes for Future Use

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 [1] Pygments, an external Python-based program. I installed Pygments through pip install, not realizing that Arch has it provided under its package manager called [2] pygmentize.


Top