A versatile button component with integrated tooltip functionality, perfect for providing contextual information on hover. Built with shadcn/ui and Radix UI primitives.
Features: • Built-in tooltip for contextual information • Adjustable tooltip positioning • Built-in accessibility • Multiple button style options • Full TypeScript support • Simple icon library integration
Props: TooltipIconButton • tooltip: string - Tooltip display text • side?: "top" | "bottom" | "left" | "right" - Tooltip position (defaults to "bottom") • className?: string - Custom CSS classes • children: ReactNode - Button content, typically an icon
Use Cases: • Icon buttons with explanatory tooltips • Icon-based navigation menus • Hover-activated help information • Improved interface accessibility • Clean UI with hidden contextual details
"use client";
import {
Bell,
Settings,
Heart,
Info
} from "lucide-react";
import { TooltipIconButton }from "@/components/ui/tooltip-icon-button"
export function TooltipIconButtonDemo() {
return (
<div className="flex flex-col gap-8 p-8">
<div className="flex gap-4">
<TooltipIconButton tooltip="Notifications" side="top">
<Bell className="h-4 w-4" />
</TooltipIconButton>
<TooltipIconButton tooltip="Settings" side="right">
<Settings className="h-4 w-4" />
</TooltipIconButton>
<TooltipIconButton tooltip="Favorites" side="bottom">
<Heart className="h-4 w-4" />
</TooltipIconButton>
<TooltipIconButton tooltip="Information" side="left">
<Info className="h-4 w-4" />
</TooltipIconButton>
</div>
<div className="flex gap-4">
<TooltipIconButton
tooltip="Primary Button"
variant="default"
className="bg-primary"
>
<Bell className="h-4 w-4" />
</TooltipIconButton>
<TooltipIconButton
tooltip="Destructive Button"
variant="destructive"
>
<Heart className="h-4 w-4" />
</TooltipIconButton>
<TooltipIconButton
tooltip="Outline Button"
variant="outline"
>
<Settings className="h-4 w-4" />
</TooltipIconButton>
</div>
</div>
);
}