watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-08 14:47:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Use FloatingTooltip from zen.

Browse source
This commit is contained in:
Mike Cao 2025-03-13 17:52:45 -07:00
parent 556cc1b205
commit a9ba2504d7
9 changed files with 37 additions and 149 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/common/HoverTooltip.module.css
View file

@ -1,6 +0,0 @@
.tooltip {
position: fixed;
pointer-events: none;
z-index: var(--z-index-popup);
transform: translate(-50%, calc(-100% - 5px));
}

25
src/components/common/HoverTooltip.tsx
View file

@ -1,25 +0,0 @@
import { ReactNode, useEffect, useState } from 'react';
import { Tooltip } from '@umami/react-zen';
import styles from './HoverTooltip.module.css';
export function HoverTooltip({ children }: { children: ReactNode }) {
const [position, setPosition] = useState({ x: -1000, y: -1000 });
useEffect(() => {
const handler = e => {
setPosition({ x: e.clientX, y: e.clientY });
};
document.addEventListener('mousemove', handler);
return () => {
document.removeEventListener('mousemove', handler);
};
}, []);
return (
<Tooltip className={styles.tooltip} style={{ left: position.x, top: position.y }}>
{children}
</Tooltip>
);
}