'use client'; import React from 'react'; import * as TooltipPrimitive from '@radix-ui/react-tooltip'; import { withCn, withProps } from '@udecode/cn'; export const TooltipProvider = withProps(TooltipPrimitive.Provider, { delayDuration: 0, disableHoverableContent: true, skipDelayDuration: 0, }); export const Tooltip = TooltipPrimitive.Root; export const TooltipTrigger = TooltipPrimitive.Trigger; export const TooltipPortal = TooltipPrimitive.Portal; export const TooltipContent = withCn( withProps(TooltipPrimitive.Content, { sideOffset: 4, }), 'z-50 overflow-hidden rounded-md bg-black px-3 py-1.5 text-sm font-semibold text-white shadow-md' ); export function withTooltip< T extends React.ComponentType | keyof HTMLElementTagNameMap, >(Component: T) { return React.forwardRef< React.ElementRef, { tooltipContentProps?: Omit< React.ComponentPropsWithoutRef, 'children' >; tooltipProps?: Omit< React.ComponentPropsWithoutRef, 'children' >; tooltip?: React.ReactNode; } & React.ComponentPropsWithoutRef & Omit >(function ExtendComponent( { delayDuration = 0, disableHoverableContent = true, skipDelayDuration = 0, tooltip, tooltipContentProps, tooltipProps, ...props }, ref ) { const [mounted, setMounted] = React.useState(false); React.useEffect(() => { setMounted(true); }, []); const component = ; if (tooltip && mounted) { return ( {component} {tooltip} ); } return component; }); }

Tooltip

Installation