feat: add tooltip for social link

data/social.ts

@@ -11,6 +11,13 @@ export type Social = {
   discord?: string
 }
 
+type SocialValue = {
+  href?: string
+  title: string
+  icon: string
+  color: string
+}
+
 const social: Social = {
   github: 'https://github.com/kuizuo',
   twitter: 'https://twitter.com/kuizuo',
@@ -24,7 +31,7 @@ const social: Social = {
   discord: 'https://discord.gg/M8cVcjDxkz',
 }
 
-const SOCIAL = {
+const socialSet: Record<keyof Social, SocialValue> = {
   github: {
     href: social.github,
     title: 'GitHub',
@@ -87,4 +94,4 @@ const SOCIAL = {
   },
 }
 
-export default SOCIAL
+export default socialSet

docusaurus.config.ts

@@ -107,7 +107,7 @@ const config: Config = {
           title: '更多',
           items: [
             { label: '友链', position: 'right', to: 'friends' },
-            { label: '导航', position: 'right', to: 'resource' },
+            { label: '导航', position: 'right', to: 'resources' },
             {
               html: `
                 <a href="https://docusaurus.io/zh-CN/" target="_blank" rel="noreferrer noopener">

src/components/SocialLinks/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import { useThemeConfig } from '@docusaurus/theme-common'
-import { ThemeConfig } from '@docusaurus/preset-classic'
+import Tooltip from '@site/src/components/Tooltip'
 import { Icon } from '@iconify/react'
 import social from '@site/data/social'
 import styles from './styles.module.scss'
@@ -27,9 +26,11 @@ interface Props {
 
 function SocialLink({ href, icon, title, color, ...prop }: Props) {
   return (
-    <a href={href} target="_blank" {...prop} title={title}>
-      {typeof icon === 'string' ? <Icon icon={icon} /> : icon}
-    </a>
+    <Tooltip key={title} text={title} anchorEl="#__docusaurus" id={`tooltip-${title}`}>
+      <a href={href} target="_blank" {...prop} title={title}>
+        {typeof icon === 'string' ? <Icon icon={icon} /> : icon}
+      </a>
+    </Tooltip>
   )
 }
 

src/pages/project/_components/ShowcaseTooltip/index.tsx → src/components/Tooltip/index.tsx

@@ -11,40 +11,28 @@ interface Props {
   children: React.ReactElement
 }
 
-export default function Tooltip({
-  children,
-  id,
-  anchorEl,
-  text,
-  delay,
-}: Props): JSX.Element {
+export default function Tooltip({ children, id, anchorEl, text, delay }: Props): JSX.Element {
   const [open, setOpen] = useState(false)
-  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(
-    null,
-  )
+  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null)
   const [popperElement, setPopperElement] = useState<HTMLElement | null>(null)
   const [arrowElement, setArrowElement] = useState<HTMLElement | null>(null)
   const [container, setContainer] = useState<Element | null>(null)
-  const { styles: popperStyles, attributes } = usePopper(
-    referenceElement,
-    popperElement,
-    {
-      modifiers: [
-        {
-          name: 'arrow',
-          options: {
-            element: arrowElement,
-          },
+  const { styles: popperStyles, attributes } = usePopper(referenceElement, popperElement, {
+    modifiers: [
+      {
+        name: 'arrow',
+        options: {
+          element: arrowElement,
         },
-        {
-          name: 'offset',
-          options: {
-            offset: [0, 8],
-          },
+      },
+      {
+        name: 'offset',
+        options: {
+          offset: [0, 8],
         },
-      ],
-    },
-  )
+      },
+    ],
+  })
 
   const timeout = useRef<number | null>(null)
   const tooltipId = `${id}_tooltip`
@@ -77,7 +65,7 @@ export default function Tooltip({
 
       timeout.current = window.setTimeout(() => {
         setOpen(true)
-      }, delay || 400)
+      }, delay || 300)
     }
 
     const handleClose = () => {

src/pages/project/_components/ShowcaseTooltip/styles.module.css → src/components/Tooltip/styles.module.css

@@ -15,14 +15,6 @@
   visibility: hidden;
 }
 
-.tooltipArrow,
-.tooltipArrow::before {
-  position: absolute;
-  width: 8px;
-  height: 8px;
-  background: inherit;
-}
-
 .tooltipArrow::before {
   visibility: visible;
   content: '';

src/pages/project/_components/ShowcaseCard/index.tsx

@@ -5,7 +5,7 @@ import Link from '@docusaurus/Link'
 import Translate from '@docusaurus/Translate'
 import styles from './styles.module.css'
 import FavoriteIcon from '@site/src/components/svgIcons/FavoriteIcon'
-import Tooltip from '../ShowcaseTooltip'
+import Tooltip from '@site/src/components/Tooltip'
 import { Tags, TagList, type TagType, type Project, type Tag } from '@site/data/projects'
 import { sortBy } from '@site/src/utils/jsUtils'
 

src/pages/resource/_components/ResourceCard/index.tsx → src/pages/resources/_components/ResourceCard/index.tsx

@@ -4,7 +4,7 @@ import Link from '@docusaurus/Link'
 
 import styles from './styles.module.css'
 import { type Resource } from '@site/data/resources'
-import Tooltip from '../../../project/_components/ShowcaseTooltip'
+import Tooltip from '@site/src/components/Tooltip'
 
 const ResourceCard = memo(({ resource }: { resource: Resource }) => (
   <li