add tooltip on emoji hover

packages/pl-fe/src/components/ui/tooltip.tsx

@@ -18,13 +18,15 @@ interface ITooltip {
   text: string;
   /** If disabled, it will render the children without wrapping them. */
   disabled?: boolean;
+  /** Delay in ms before the tooltip appears. */
+  delay?: number;
 }
 
 /**
  * Tooltip
  */
 const Tooltip: React.FC<ITooltip> = (props) => {
-  const { children, text, disabled = false } = props;
+  const { children, text, disabled = false, delay } = props;
 
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
@@ -43,7 +45,7 @@ const Tooltip: React.FC<ITooltip> = (props) => {
     whileElementsMounted: autoUpdate,
   });
 
-  const hover = useHover(context);
+  const hover = useHover(context, { delay });
   const { isMounted, styles } = useTransitionStyles(context, {
     initial: {
       opacity: 0,
@@ -80,7 +82,7 @@ const Tooltip: React.FC<ITooltip> = (props) => {
               left: x ?? 0,
               ...styles,
             }}
-            className='pointer-events-none z-[100] whitespace-nowrap rounded bg-gray-800 px-2.5 py-1.5 text-xs font-medium text-gray-100 shadow dark:bg-gray-100 dark:text-gray-900'
+            className='pointer-events-none z-[100] whitespace-nowrap rounded bg-gray-800 px-2.5 py-1.5 text-sm font-medium tracking-wide text-gray-100 shadow dark:bg-gray-100 dark:text-gray-900'
             {...getFloatingProps()}
           >
             {text}

packages/pl-fe/src/features/emoji/emojify.tsx

@@ -2,6 +2,7 @@ import split from 'graphemesplit';
 import React from 'react';
 
 import Emoji from 'pl-fe/components/ui/emoji';
+import Tooltip from 'pl-fe/components/ui/tooltip';
 import { useSettings } from 'pl-fe/stores/settings';
 import { makeEmojiMap } from 'pl-fe/utils/normalizers';
 import { joinPublicPath } from 'pl-fe/utils/static';
@@ -10,6 +11,7 @@ import unicodeMapping from './mapping';
 
 import { validEmojiChar } from '.';
 
+
 import type { CustomEmoji } from 'pl-api';
 
 interface IMaybeEmoji {
@@ -25,11 +27,15 @@ const MaybeEmoji: React.FC<IMaybeEmoji> = ({ text, emojis }) => {
 
     if (filename?.length > 0) {
       return (
-        <Emoji
-          className='emojione size-16 transition-transform hover:scale-125'
-          emoji={text}
-          src={filename}
-        />
+        <Tooltip text={text} delay={750}>
+          <span>
+            <Emoji
+              className='emojione size-16 transition-transform hover:scale-125'
+              emoji={text}
+              src={filename}
+            />
+          </span>
+        </Tooltip>
       );
       // return <img draggable={false} className='emojione transition-transform hover:scale-125' alt={text} title={text} src={filename} />;
     }