File size: 1,900 Bytes
80bcac8 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | 'use client'
import { 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', className)} {...props}>
{children}
<div
className={cn(
'absolute z-50 px-2 py-1 text-xs font-medium text-white bg-gray-900 rounded shadow-lg',
'opacity-0 invisible transition-all duration-200',
'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-[-8px] left-1/2 -translate-x-1/2 border-t-gray-900',
position === 'bottom' && 'top-[-8px] left-1/2 -translate-x-1/2 border-b-gray-900',
position === 'left' && 'right-[-8px] top-1/2 -translate-y-1/2 border-l-gray-900',
position === 'right' && 'left-[-8px] top-1/2 -translate-y-1/2 border-r-gray-900'
)}
/>
</div>
</div>
)
}
)
Tooltip.displayName = 'Tooltip'
// Need to import React
import React from 'react' |