Interfaces Tooltip

Buttons 3

About

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

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

Code

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

Usage.tsx

import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/interfaces-tooltip"

export default function TooltipBottomDemo() {
  return (
    <div className="flex items-center justify-center w-full min-h-screen bg-background p-8 overflow-hidden">
      <Tooltip>
        <TooltipTrigger asChild>
          <button className="inline-flex items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-sm hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
            Hover
          </button>
        </TooltipTrigger>
        <TooltipContent side="bottom">
          Add to library
        </TooltipContent>
      </Tooltip>
    </div>
  )
}