Update tooltip (#187)

* Show article tooltip onClick

* remove unused imports

* Resolve conversations

src/components/Article/Article.module.scss

@@ -554,9 +554,26 @@ a[data-toggle='tooltip'] {
 }
 
 .tooltip {
+  @include font-size(1.4rem);
+
+  position: relative;
   padding: 8px;
-  background: #141414;
-  font-size: 12px;
-  color: white;
+  border-radius: 4px;
   max-width: 400px;
+  box-sizing: border-box;
+  background: var(--black-500);
+  color: var(--default-color-invert);
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    bottom: -4px;
+    transform: translateX(-50%);
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 4px 4px 0 4px;
+    border-color: var(--black-500) transparent transparent transparent;
+  }
 }

src/components/Article/FullArticle.tsx

@@ -1,4 +1,4 @@
-import { createEffect, For, createMemo, onMount, Show, createSignal } from 'solid-js'
+import { createEffect, For, createMemo, onMount, Show, createSignal, onCleanup } from 'solid-js'
 import { Title } from '@solidjs/meta'
 import { clsx } from 'clsx'
 import { getPagePath } from '@nanostores/router'
@@ -128,24 +128,67 @@ export const FullArticle = (props: Props) => {
     setIsReactionsLoaded(true)
   })
 
+  const clickHandlers = []
+  const documentClickHandlers = []
+
   onMount(() => {
     const tooltipElements: NodeListOf<HTMLLinkElement> =
       document.querySelectorAll('[data-toggle="tooltip"]')
     if (!tooltipElements) return
+
     tooltipElements.forEach((element) => {
       const tooltip = document.createElement('div')
       tooltip.classList.add(styles.tooltip)
       tooltip.textContent = element.dataset.originalTitle
       document.body.appendChild(tooltip)
-      createPopper(element, tooltip, { placement: 'top' })
+      element.setAttribute('href', 'javascript: void(0);')
+      createPopper(element, tooltip, {
+        placement: 'top',
+        modifiers: [
+          {
+            name: 'offset',
+            options: {
+              offset: [0, 8]
+            }
+          }
+        ]
+      })
+
       tooltip.style.visibility = 'hidden'
-      element.addEventListener('mouseenter', () => {
+      let isTooltipVisible = false
+
+      const handleClick = () => {
+        if (isTooltipVisible) {
+          tooltip.style.visibility = 'hidden'
+          isTooltipVisible = false
+        } else {
           tooltip.style.visibility = 'visible'
-      })
-      element.addEventListener('mouseleave', () => {
+          isTooltipVisible = true
+        }
+      }
+
+      const handleDocumentClick = (e) => {
+        if (isTooltipVisible && e.target !== element && e.target !== tooltip) {
           tooltip.style.visibility = 'hidden'
+          isTooltipVisible = false
+        }
+      }
+
+      element.addEventListener('click', handleClick)
+      document.addEventListener('click', handleDocumentClick)
+
+      clickHandlers.push({ element, handler: handleClick })
+      documentClickHandlers.push(handleDocumentClick)
     })
   })
+
+  onCleanup(() => {
+    clickHandlers.forEach(({ element, handler }) => {
+      element.removeEventListener('click', handler)
+    })
+    documentClickHandlers.forEach((handler) => {
+      document.removeEventListener('click', handler)
+    })
   })
 
   return (