45 lines
1.0 KiB
TypeScript
45 lines
1.0 KiB
TypeScript
import { PropsWithChildren, useState } from "react"
|
|
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
|
|
import { tooltipVariants } from "./variants"
|
|
|
|
import styles from "./tooltip.module.css"
|
|
|
|
import { TooltipPosition, TooltipProps } from "@/types/components/tooltip"
|
|
|
|
export function Tooltip<P extends TooltipPosition>({
|
|
heading,
|
|
text,
|
|
position,
|
|
arrow,
|
|
children,
|
|
}: PropsWithChildren<TooltipProps<P>>) {
|
|
const className = tooltipVariants({ position, arrow })
|
|
const [isActive, setIsActive] = useState(false)
|
|
|
|
function handleToggle() {
|
|
setIsActive(!isActive)
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={styles.tooltipContainer}
|
|
role="tooltip"
|
|
aria-label={text}
|
|
onClick={handleToggle}
|
|
data-active={isActive}
|
|
>
|
|
<div className={className}>
|
|
{heading && (
|
|
<Caption type="bold" color="white">
|
|
{heading}
|
|
</Caption>
|
|
)}
|
|
{text && <Caption color="white">{text}</Caption>}
|
|
</div>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|