Component tooltip-button-demo not found in registry.
Installation
Usage
import TooltipButton from "@/components/ruixen/tooltip-button";
import { HelpCircle, Save, Settings } from "lucide-react";
export default function App() {
return (
<div className="space-y-4 flex gap-4">
{/* Help button with info icon */}
<TooltipButton
label="Help"
tooltip="Get help and support for this feature"
icon={<HelpCircle className="w-4 h-4" />}
size="md"
/>
{/* Save button with custom tooltip */}
<TooltipButton
label="Save"
tooltip="Save your changes (Ctrl+S)"
icon={<Save className="w-4 h-4" />}
size="sm"
onClick={() => console.log("Saved!")}
/>
{/* Settings without custom icon (uses default) */}
<TooltipButton
label="Settings"
tooltip="Open application settings and preferences"
size="lg"
className="bg-gray-500 hover:bg-gray-600"
/>
</div>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | - | Button text |
tooltip | string | - | Tooltip content text |
size | "sm" | "md" | "lg" | "md" | Button size |
icon | React.ReactNode | Info icon | Button icon |
className | string | - | Additional CSS classes |
Features
- Integrated Tooltip: Built-in tooltip component
- Default Icon: Info icon if no custom icon provided
- Size Variants: Small, medium, and large sizes
- Hover Trigger: Tooltip appears on hover
- Accessible: Proper ARIA attributes and keyboard support
- Customizable: Custom icons and styling support
Size Variants
// Small button
<TooltipButton size="sm" label="Help" tooltip="Small help button" />
// Medium button (default)
<TooltipButton size="md" label="Info" tooltip="Medium info button" />
// Large button
<TooltipButton size="lg" label="Guide" tooltip="Large guide button" />Icon Customization
import { AlertCircle, CheckCircle, XCircle } from "lucide-react";
// Warning button
<TooltipButton
label="Warning"
tooltip="This action cannot be undone"
icon={<AlertCircle className="w-4 h-4" />}
/>
// Success button
<TooltipButton
label="Success"
tooltip="Operation completed successfully"
icon={<CheckCircle className="w-4 h-4" />}
/>
// Error button
<TooltipButton
label="Error"
tooltip="An error occurred during processing"
icon={<XCircle className="w-4 h-4" />}
/>Tooltip Positioning
The tooltip appears:
- Position: Above the button (
side="top") - Alignment: Centered relative to button
- Timing: Shows on hover, hides on mouse leave
- Z-index: Proper layering above other content
Common Use Cases
Help and Support
<TooltipButton
label="Help"
tooltip="Click for help documentation and tutorials"
icon={<HelpCircle />}
/>Action Explanations
<TooltipButton
label="Export"
tooltip="Export data as CSV file (includes all filtered results)"
icon={<Download />}
/>Keyboard Shortcuts
<TooltipButton label="Save" tooltip="Save document (Ctrl+S)" icon={<Save />} />Use Cases
Perfect for:
- Help Buttons: Provide contextual help information
- Action Clarification: Explain what buttons do
- Keyboard Shortcuts: Show shortcut keys
- Feature Descriptions: Describe complex features
- Status Information: Provide additional status context