make the 🔗 button copy branch links to clipboard

to accomplish this, I generalised emoji tooltips to a shared Tooltip class.
in the long run I'd like to transform all existing `title=""` tooltips into these for stylistic consistency with the rest of the website, but this is good enough for now.

I also ended up cleaning up some old code from before the /b rework.

static/css/main.css

@@ -611,21 +611,26 @@ img[data-cast~="emoji"] {
     object-fit: contain;
 }
 
-/* And also style emoji tooltips. */
+/* Tooltips */
 
-th-emoji-tooltip {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+th-overlays {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+}
+
+th-tooltip {
+    display: block;
 
     position: fixed;
-    transform: translateX(-50%) translateY(-10%) scale(0.8);
     width: max-content;
     z-index: 100;
 
     background-color: var(--background-color-tooltip);
-    padding: 0.8rem;
-    margin-top: 0.8rem;
+    padding: 0.4rem 0.8rem;
     border-radius: 0.6rem;
 
     transition:
@@ -635,27 +640,51 @@ th-emoji-tooltip {
     opacity: 0%;
     filter: blur(0.3rem);
     pointer-events: none;
+
+    font-size: 0.9em;
+
+    &[th-side="bottom"] {
+        transform: translateX(-50%) translateY(-10%) scale(0.8);
+
+        &.transitioned-in {
+            transform: translateX(-50%) scale(1);
+        }
+    }
+
+    &[th-side="left"] {
+        transform: translateX(-90%) translateY(-50%) scale(0.8);
+
+        &.transitioned-in {
+            transform: translateX(-100%) translateY(-50%);
+        }
+    }
 }
 
-th-emoji-tooltip.transitioned-in {
+th-tooltip.transitioned-in {
     opacity: 100%;
     filter: blur(0);
-    transform: translateX(-50%) scale(1);
 }
 
-th-emoji-tooltip img {
-    display: block;
-    max-width: 7.2rem;
-    max-height: 7.2rem;
-}
+th-tooltip.tooltip-emoji {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 
-th-emoji-tooltip p {
-    --recursive-wght: 550;
-    color: var(--text-color);
-    font-size: 0.9em;
-    margin: 0;
-    padding-top: 0.6rem;
-    line-height: 1;
+    padding: 0.8rem;
+    margin-top: 0.8rem;
+
+    & > img {
+        display: block;
+        max-width: 7.2rem;
+        max-height: 7.2rem;
+    }
+
+    & > p {
+        color: var(--text-color);
+        margin: 0;
+        padding-top: 0.6rem;
+        line-height: 1;
+    }
 }
 
 .th-emoji-unknown {

static/css/tree.css

@@ -239,7 +239,7 @@ th-bc {
 .tree details:not([open])>summary>th-bc>:last-child,
 /* NOTE: Linked branches have a slightly different structure (extra <noscript> tag) and therefore
    :last-child does not work. */
-.tree li[data-th-link]>details:not([open])>summary>th-bc>:nth-last-child(2) {
+.tree li[th-link]>details:not([open])>summary>th-bc>:nth-last-child(2) {
     &::after {
         content: "\00A0";
         display: inline-block;