Tooltip
Short hint text on hover or keyboard focus. Wrap the app root in one TooltipProvider, do not nest a provider per tooltip, and skip tooltips for anything a mobile user needs to read since hover does not exist there.
Live preview
open in new tab ↗"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
import { Tooltip as TooltipPrimitive } from "radix-ui"
function TooltipProvider({ delayDuration = 0, ...props }) {
return <TooltipPrimitive.Provider delayDuration={delayDuration} {...props} />
}
function Tooltip(props) {
return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
}
function TooltipTrigger(props) {
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
}
function TooltipContent({ className, sideOffset = 0, children, ...props }) {
return (
<TooltipPrimitive.Portal>
<TooltipPrimitive.Content
data-slot="tooltip-content"
sideOffset={sideOffset}
className={cn("z-50 w-fit rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background", className)}
{...props}
>
{children}
<TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground" />
</TooltipPrimitive.Content>
</TooltipPrimitive.Portal>
)
}
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }Block id: shadcn-tooltipreact-tailwind · code-required
More composite blocks
Want the whole site, not just the block?
We ship real client sites in 3 weeks — with blocks like this one, wired to your brand.