| 'use client' |
|
|
| import React, { forwardRef, HTMLAttributes } from 'react' |
| import { cn } from '@/utils/helpers' |
|
|
| export interface TooltipProps extends HTMLAttributes<HTMLDivElement> { |
| content: string |
| position?: 'top' | 'bottom' | 'left' | 'right' |
| children: React.ReactElement |
| } |
|
|
| export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>( |
| ({ className, content, position = 'top', children, ...props }, ref) => { |
| if (!React.isValidElement(children)) { |
| return <>{children}</> |
| } |
|
|
| const positions = { |
| top: 'bottom-full left-1/2 -translate-x-1/2 mb-2', |
| bottom: 'top-full left-1/2 -translate-x-1/2 mt-2', |
| left: 'right-full top-1/2 -translate-y-1/2 mr-2', |
| right: 'left-full top-1/2 -translate-y-1/2 ml-2', |
| } |
|
|
| return ( |
| <div ref={ref} className={cn('relative inline-block group', className)} {...props}> |
| {children} |
| <div |
| className={cn( |
| 'absolute z-50 px-3 py-1.5 text-xs font-medium text-on-primary bg-primary rounded-lg', |
| 'opacity-0 invisible transition-all duration-200 ease-out', |
| 'group-hover:opacity-100 group-hover:visible', |
| 'whitespace-nowrap', |
| positions[position] |
| )} |
| role="tooltip" |
| > |
| {content} |
| <div |
| className={cn( |
| 'absolute w-0 h-0 border-4 border-transparent', |
| position === 'top' && 'bottom-[-6px] left-1/2 -translate-x-1/2 border-t-primary', |
| position === 'bottom' && 'top-[-6px] left-1/2 -translate-x-1/2 border-b-primary', |
| position === 'left' && 'right-[-6px] top-1/2 -translate-y-1/2 border-l-primary', |
| position === 'right' && 'left-[-6px] top-1/2 -translate-y-1/2 border-r-primary' |
| )} |
| /> |
| </div> |
| </div> |
| ) |
| } |
| ) |
|
|
| Tooltip.displayName = 'Tooltip' |
|
|
