47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
// We do use all the classes in this file currently, but we
|
|
// index into them with styles[position], which CSS Modules doesn't pick up.
|
|
// eslint-disable-next-line css-modules/no-unused-class
|
|
import styles from './Tooltip.module.css'
|
|
|
|
type TopOrBottom = 'top' | 'bottom'
|
|
type LeftOrRight = 'left' | 'right'
|
|
type Corner = `${TopOrBottom}-${LeftOrRight}`
|
|
type TooltipPosition = TopOrBottom | LeftOrRight | Corner
|
|
|
|
interface TooltipProps extends React.PropsWithChildren {
|
|
position?: TooltipPosition
|
|
wrapperClassName?: string
|
|
contentClassName?: string
|
|
delay?: number
|
|
hoverOnly?: boolean
|
|
inert?: boolean
|
|
}
|
|
|
|
export default function Tooltip({
|
|
children,
|
|
position = 'top',
|
|
wrapperClassName: className,
|
|
contentClassName,
|
|
delay = 200,
|
|
hoverOnly = false,
|
|
inert = true,
|
|
}: TooltipProps) {
|
|
return (
|
|
<div
|
|
// @ts-ignore while awaiting merge of this PR for support of "inert" https://github.com/DefinitelyTyped/DefinitelyTyped/pull/60822
|
|
inert={inert}
|
|
role="tooltip"
|
|
className={`p-3 ${
|
|
position !== 'left' && position !== 'right' ? 'px-0' : ''
|
|
} ${styles.tooltipWrapper} ${hoverOnly ? '' : styles.withFocus} ${
|
|
styles[position]
|
|
} ${className}`}
|
|
style={{ '--_delay': delay + 'ms' } as React.CSSProperties}
|
|
>
|
|
<div className={`rounded ${styles.tooltip} ${contentClassName || ''}`}>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|