parse footnotes after migration (#182)

src/components/Article/Article.module.scss

@@ -533,3 +533,30 @@ img {
     }
   }
 }
+
+a[data-toggle='tooltip'] {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: text-top;
+  justify-content: center;
+  position: relative;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  margin: -2px 0 0 1px;
+  border: unset;
+  background-size: 10px;
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgY2xhc3M9ImJpIGJpLWluZm8tY2lyY2xlIiBmaWxsPSJjdXJyZW50Q29sb3IiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik04IDE1QTcgNyAwIDEgMSA4IDFhNyA3IDAgMCAxIDAgMTR6bTAgMUE4IDggMCAxIDAgOCAwYTggOCAwIDAgMCAwIDE2eiIvPjxwYXRoIGQ9Im04LjkzIDYuNTg4LTIuMjkuMjg3LS4wODIuMzguNDUuMDgzYy4yOTQuMDcuMzUyLjE3Ni4yODguNDY5bC0uNzM4IDMuNDY4Yy0uMTk0Ljg5Ny4xMDUgMS4zMTkuODA4IDEuMzE5LjU0NSAwIDEuMTc4LS4yNTIgMS40NjUtLjU5OGwuMDg4LS40MTZjLS4yLjE3Ni0uNDkyLjI0Ni0uNjg2LjI0Ni0uMjc1IDAtLjM3NS0uMTkzLS4zMDQtLjUzM0w4LjkzIDYuNTg4ek05IDQuNWExIDEgMCAxIDEtMiAwIDEgMSAwIDAgMSAyIDB6Ii8+PC9zdmc+');
+
+  &:hover {
+    background-color: unset;
+  }
+}
+
+.tooltip {
+  padding: 8px;
+  background: #141414;
+  font-size: 12px;
+  color: white;
+  max-width: 400px;
+}

src/components/Article/FullArticle.tsx

@@ -31,9 +31,9 @@ import { Popover } from '../_shared/Popover'
 import { VideoPlayer } from '../_shared/VideoPlayer'
 import { Icon } from '../_shared/Icon'
 import { SolidSwiper } from '../_shared/SolidSwiper'
-
 import styles from './Article.module.scss'
 import { CardTopic } from '../Feed/CardTopic'
+import { createPopper } from '@popperjs/core'
 
 interface Props {
   article: Shout
@@ -128,6 +128,26 @@ export const FullArticle = (props: Props) => {
     setIsReactionsLoaded(true)
   })
 
+  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' })
+      tooltip.style.visibility = 'hidden'
+      element.addEventListener('mouseenter', () => {
+        tooltip.style.visibility = 'visible'
+      })
+      element.addEventListener('mouseleave', () => {
+        tooltip.style.visibility = 'hidden'
+      })
+    })
+  })
+
   return (
     <>
       <Title>{props.article.title}</Title>

src/styles/app.scss

@@ -205,7 +205,7 @@ a:link {
   transition: color 0.2s, background-color 0.2s;
 
   &:hover {
-    background: var(--link-hover-background);
+    background-color: var(--link-hover-background);
     color: var(--link-hover-color);
   }
 }