diff --git a/packages/pl-fe/src/components/ui/tooltip.tsx b/packages/pl-fe/src/components/ui/tooltip.tsx index e5d24bb31..c5d2e2cf2 100644 --- a/packages/pl-fe/src/components/ui/tooltip.tsx +++ b/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 = (props) => { - const { children, text, disabled = false } = props; + const { children, text, disabled = false, delay } = props; const [isOpen, setIsOpen] = useState(false); @@ -43,7 +45,7 @@ const Tooltip: React.FC = (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 = (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} diff --git a/packages/pl-fe/src/features/emoji/emojify.tsx b/packages/pl-fe/src/features/emoji/emojify.tsx index 9dcf067bb..a471d9c54 100644 --- a/packages/pl-fe/src/features/emoji/emojify.tsx +++ b/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 = ({ text, emojis }) => { if (filename?.length > 0) { return ( - + + + + + ); // return {text}; }