Components
Loading preview...
A Tooltip from the Flexnative UI registry with 10 variants: basic hover, four-side positioning, keyboard shortcut hint, icon-button trigger, custom open delay, rich multi-line content, light-on-dark theming, colored variants, arrow-less, and adjustable side offset. Built on Radix Tooltip.
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/flexnative-tooltip'use client'
import { TooltipProvider } from '@/components/ui/flexnative-tooltip'
import { Button } from '@/components/ui/button'
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from '@/components/ui/flexnative-tooltip'
export function Tooltip02() {
return (
<div className="grid grid-cols-3 grid-rows-3 gap-3">
<div className="col-start-2 row-start-1 flex justify-center">
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline">Top</Button>
</TooltipTrigger>
<TooltipContent side="top">Tooltip on top</TooltipContent>
</Tooltip>
</div>
<div className="col-start-1 row-start-2 flex justify-start">
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline">Left</Button>
</TooltipTrigger>
<TooltipContent side="left">Tooltip on left</TooltipContent>
</Tooltip>
</div>
<div className="col-start-3 row-start-2 flex justify-end">
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline">Right</Button>
</TooltipTrigger>
<TooltipContent side="right">Tooltip on right</TooltipContent>
</Tooltip>
</div>
<div className="col-start-2 row-start-3 flex justify-center">
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline">Bottom</Button>
</TooltipTrigger>
<TooltipContent side="bottom">Tooltip on bottom</TooltipContent>
</Tooltip>
</div>
</div>
)
}
export default function Default() {
return (
<TooltipProvider>
<div className="flex min-h-screen w-full items-center justify-center bg-background p-10">
<Tooltip02 />
</div>
</TooltipProvider>
)
}