Add tooltips on click for touch/pen screens

Credit to SO contributer 'H K': https://stackoverflow.com/a/60660207

src/sass/colors.sass

@@ -18,6 +18,7 @@ $rank:            #505050
 $odd-bg:          #121212
 $even-bg:         #161616
 $comment-brd:     #333
+$tooltip-bg:      #121212
 
 $thread-title:    #a6a6a6
 $thread-score:    #646464
@@ -52,6 +53,7 @@ $l-rank:            #afafaf
 $l-odd-bg:          #f6f6f6
 $l-even-bg:         white
 $l-comment-brd:     #ccc
+$l-tooltip-bg:      white
 
 $l-thread-title:    #4d4d4d
 $l-thread-score:    #878787
@@ -88,6 +90,7 @@ $l-about-q:         #522719
   --odd-bg:          #{$odd-bg}
   --even-bg:         #{$even-bg}
   --comment-brd:     #{$comment-brd}
+  --tooltip-bg:      #{$tooltip-bg}
 
   --thread-title:    #{$thread-title}
   --thread-score:    #{$thread-score}
@@ -121,6 +124,7 @@ $l-about-q:         #522719
   --l-odd-bg:          #{$odd-bg}
   --l-even-bg:         #{$even-bg}
   --l-comment-brd:     #{$comment-brd}
+  --l-tooltip-bg:      #{$tooltip-bg}
 
   --l-thread-title:    #{$thread-title}
   --l-thread-score:    #{$thread-score}
@@ -157,6 +161,7 @@ $l-about-q:         #522719
   --odd-bg:          #{$l-odd-bg}
   --even-bg:         #{$l-even-bg}
   --comment-brd:     #{$l-comment-brd}
+  --tooltip-bg:      #{$l-tooltip-bg}
 
   --thread-title:    #{$l-thread-title}
   --thread-score:    #{$l-thread-score}
@@ -193,6 +198,7 @@ $l-about-q:         #522719
   --l-odd-bg:          #{$l-odd-bg}
   --l-even-bg:         #{$l-even-bg}
   --l-comment-brd:     #{$l-comment-brd}
+  --l-tooltip-bg:      #{$l-tooltip-bg}
 
   --l-thread-title:    #{$l-thread-title}
   --l-thread-score:    #{$l-thread-score}

src/sass/common.sass

@@ -99,3 +99,30 @@ select
   color: var(--dim)
   @media (prefers-color-scheme: light)
     color: var(--l-dim)
+
+
+// Show tooltip on click for touch/pen screens; credit to https://stackoverflow.com/a/60660207
+@media (pointer: coarse), (hover: none)
+
+  span[title], a[title]
+    position: relative
+    display: inline-flex
+    justify-content: center
+
+    &:hover::after
+      content: attr(title)
+      position: absolute
+      top: 95%
+      z-index: 1
+      padding: 3px
+      min-width: 125px
+      font-weight: normal
+      text-align: center
+      color: var(--white)
+      background-color: var(--tooltip-bg)
+      border: 1px solid var(--thread-brd)
+      border-radius: 3px
+      @media (prefers-color-scheme: light)
+        color: var(--l-white)
+        background-color: var(--l-tooltip-bg)
+        border-color: var(--l-thread-brd)