StarMC/Astral-nook
StarMC/Astral-nook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Improve usability of icon buttons in header with tooltip

Browse source
This commit is contained in:
DaneEveritt 2022-06-12 09:35:02 -04:00
parent 9c957952fb
commit f860fd2cfe
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
4 changed files with 66 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

32
resources/scripts/components/elements/tooltip/Tooltip.tsx
View file

@ -18,6 +18,9 @@ import {
import { AnimatePresence, motion } from 'framer-motion';
interface Props {
rest?: number;
delay?: number | Partial<{ open: number; close: number }>;
alwaysOpen?: boolean;
content: string | React.ReactChild;
disabled?: boolean;
arrow?: boolean;
@ -34,22 +37,35 @@ const arrowSides: Record<Side, Side> = {
right: 'left',
};
export default ({ content, children, disabled = false, ...props }: Props) => {
export default ({
content,
children,
disabled = false,
alwaysOpen = false,
delay = { open: 500 },
rest = 30,
...props
}: Props) => {
const arrowEl = useRef<HTMLDivElement>(null);
const [ open, setOpen ] = useState(false);
const [ open, setOpen ] = useState(alwaysOpen || false);
const { x, y, reference, floating, middlewareData, strategy, context } = useFloating({
open,
placement: props.placement || 'top',
strategy: props.strategy || 'absolute',
middleware: [ offset(6), flip(), shift({ padding: 6 }), arrow({ element: arrowEl, padding: 6 }) ],
onOpenChange: setOpen,
middleware: [
offset(props.arrow ? 10 : 6),
flip(),
shift({ padding: 6 }),
arrow({ element: arrowEl, padding: 6 }),
],
onOpenChange: (o) => setOpen(o || alwaysOpen || false),
whileElementsMounted: autoUpdate,
});
const { getReferenceProps, getFloatingProps } = useInteractions([
useFocus(context),
useHover(context, { restMs: 30 }),
useHover(context, { restMs: rest, delay }),
useRole(context, { role: 'tooltip' }),
useDismiss(context),
]);
@ -70,7 +86,7 @@ export default ({ content, children, disabled = false, ...props }: Props) => {
initial={{ opacity: 0, scale: 0.85 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0 }}
transition={{ type: 'easeIn', damping: 20, stiffness: 300, duration: 0.1 }}
transition={{ type: 'spring', damping: 20, stiffness: 300, duration: 0.075 }}
{...getFloatingProps({
ref: floating,
className: 'absolute top-0 left-0 bg-gray-900 text-sm text-gray-200 px-3 py-2 rounded pointer-events-none max-w-[90vw]',
@ -86,10 +102,10 @@ export default ({ content, children, disabled = false, ...props }: Props) => {
<div
ref={arrowEl}
style={{
transform: `translate(${Math.round(ax || 0)}px, ${Math.round(ay || 0)}px)`,
transform: `translate(${Math.round(ax || 0)}px, ${Math.round(ay || 0)}px) rotate(45deg)`,
[side]: '-6px',
}}
className={'absolute top-0 left-0 bg-gray-900 w-3 h-3 rotate-45'}
className={'absolute top-0 left-0 bg-gray-900 w-3 h-3'}
/>
}
</motion.div>