| 196 | |
| 197 | export const TooltipContext = React.createContext<{tooltipId?: string}>({}) |
| 198 | function Tooltip({direction = 'n', children, className, text, noDelay, align, wrap, id, ...rest}: TooltipProps) { |
| 199 | const tooltipId = useId(id) |
| 200 | const classes = clsx( |
| 201 | className, |
| 202 | `tooltipped-${direction}`, |
| 203 | align && `tooltipped-align-${align}-2`, |
| 204 | noDelay && 'tooltipped-no-delay', |
| 205 | wrap && 'tooltipped-multiline', |
| 206 | ) |
| 207 | |
| 208 | const value = useMemo(() => ({tooltipId}), [tooltipId]) |
| 209 | return ( |
| 210 | // This provider is used to check if an icon button is wrapped with tooltip or not. |
| 211 | <TooltipContext.Provider value={value}> |
| 212 | <TooltipBase role="tooltip" aria-label={text} id={tooltipId} {...rest} className={classes}> |
| 213 | {children} |
| 214 | </TooltipBase> |
| 215 | </TooltipContext.Provider> |
| 216 | ) |
| 217 | } |
| 218 | |
| 219 | Tooltip.alignments = ['left', 'right'] |
| 220 | |