diff --git a/src/components/Article/Article.module.scss b/src/components/Article/Article.module.scss index 42d0b498..efe5996f 100644 --- a/src/components/Article/Article.module.scss +++ b/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; +} diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx index 5ab6c291..9cd0f253 100644 --- a/src/components/Article/FullArticle.tsx +++ b/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 = + 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 ( <> {props.article.title} diff --git a/src/styles/app.scss b/src/styles/app.scss index 0ee1c7b3..1b8d1620 100644 --- a/src/styles/app.scss +++ b/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); } }