Files
web/components/TempDesignSystem/Tooltip/index.tsx
2024-10-07 10:51:52 +02:00

33 lines
837 B
TypeScript

import { PropsWithChildren } 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 })
return (
<div className={styles.tooltipContainer} role="tooltip" aria-label={text}>
<div className={className}>
{heading && (
<Caption textTransform="bold" color="white">
{heading}
</Caption>
)}
{text && <Caption color="white">{text}</Caption>}
</div>
{children}
</div>
)
}