matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add tooltip on emoji hover
Some checks failed
pl-api CI / Test for pl-api formatting (22.x) (push) Has been cancelled
Details
pl-fe CI / Test and upload artifacts (22.x) (push) Has been cancelled
Details
pl-hooks CI / Test for a successful build (22.x) (push) Has been cancelled
Details
pl-fe CI / deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
matty
2026-01-17 19:17:39 +00:00
parent 9caab23e8e
commit de838f636d
2 changed files with 16 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/pl-fe/src/components/ui/tooltip.tsx
View File

@ -18,13 +18,15 @@ interface ITooltip {
text: string; text: string;
/** If disabled, it will render the children without wrapping them. */ /** If disabled, it will render the children without wrapping them. */
disabled?: boolean; disabled?: boolean;
/** Delay in ms before the tooltip appears. */
delay?: number;
} }
/** /**
* Tooltip * Tooltip
*/ */
const Tooltip: React.FC<ITooltip> = (props) => { 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); const [isOpen, setIsOpen] = useState<boolean>(false);
@ -43,7 +45,7 @@ const Tooltip: React.FC<ITooltip> = (props) => {
whileElementsMounted: autoUpdate, whileElementsMounted: autoUpdate,
}); });
const hover = useHover(context); const hover = useHover(context, { delay });
const { isMounted, styles } = useTransitionStyles(context, { const { isMounted, styles } = useTransitionStyles(context, {
initial: { initial: {
opacity: 0, opacity: 0,
@ -80,7 +82,7 @@ const Tooltip: React.FC<ITooltip> = (props) => {
left: x ?? 0, left: x ?? 0,
...styles, ...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()} {...getFloatingProps()}
> >
{text} {text}

16
packages/pl-fe/src/features/emoji/emojify.tsx
View File

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