Flexnative Tooltip

Buttons

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Flexnative Tooltip to your project and fits it to your theme.

Code

How Flexnative Tooltip is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'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 Tooltip05() {
  return (
    <div className="flex items-center gap-3">
      <Tooltip delayDuration={0}>
        <TooltipTrigger asChild>
          <Button variant="outline">Instant</Button>
        </TooltipTrigger>
        <TooltipContent>Opens with no delay</TooltipContent>
      </Tooltip>
      <Tooltip delayDuration={500}>
        <TooltipTrigger asChild>
          <Button variant="outline">500ms</Button>
        </TooltipTrigger>
        <TooltipContent>Opens after 500ms hover</TooltipContent>
      </Tooltip>
      <Tooltip delayDuration={1200}>
        <TooltipTrigger asChild>
          <Button variant="outline">1.2s</Button>
        </TooltipTrigger>
        <TooltipContent>Opens after 1.2s hover</TooltipContent>
      </Tooltip>
    </div>
  )
}

export default function Default() {
  return (
    <TooltipProvider>
      <div className="flex min-h-screen w-full items-center justify-center bg-background p-10">
        <Tooltip05 />
      </div>
    </TooltipProvider>
  )
}