37 lines
1.0 KiB
TypeScript
37 lines
1.0 KiB
TypeScript
|
'use client'
|
||
|
|
|
||
|
|
import { Info } from 'lucide-react'
|
||
|
|
import {
|
||
|
|
Tooltip,
|
||
|
|
TooltipTrigger,
|
||
|
|
TooltipContent,
|
||
|
|
TooltipProvider,
|
||
|
|
} from '@/components/ui/tooltip'
|
||
|
|
|
||
|
|
type InfoTooltipProps = {
|
||
|
|
content: string
|
||
|
|
side?: 'top' | 'right' | 'bottom' | 'left'
|
||
|
|
}
|
||
|
|
|
||
|
|
export function InfoTooltip({ content, side = 'top' }: InfoTooltipProps) {
|
||
|
|
return (
|
||
|
|
<TooltipProvider delayDuration={200}>
|
||
|
|
<Tooltip>
|
||
|
|
<TooltipTrigger asChild>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
tabIndex={0}
|
||
|
|
className="inline-flex items-center justify-center rounded-full text-muted-foreground hover:text-foreground transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
|
||
|
|
>
|
||
|
|
<Info className="h-4 w-4" />
|
||
|
|
<span className="sr-only">More info</span>
|
||
|
|
</button>
|
||
|
|
</TooltipTrigger>
|
||
|
|
<TooltipContent side={side} className="max-w-xs text-sm">
|
||
|
|
{content}
|
||
|
|
</TooltipContent>
|
||
|
|
</Tooltip>
|
||
|
|
</TooltipProvider>
|
||
|
|
)
|
||
|
|
}
|