Components
Tooltip Button
The Tooltip Button is a shadcn/ui component that combines a standard button with a hover-triggered tooltip to provide additional context or guidance for users. It is perfect for icon-only buttons or actions that may not be immediately clear, as the tooltip explains the button’s purpose without cluttering the interface. The component supports optional icons, flexible text labels, and configurable sizes (sm, md, lg), making it highly adaptable for dashboards, toolbars, or any interactive UI. By using shadcn/ui primitives, it ensures accessibility, smooth animations, and a consistent, modern design.
import TooltipButton from "@/components/ui/tooltip-button"
export default function DemoTooltipButton() {
return (
<div className="flex gap-4">
<TooltipButton label="Info" tooltip="More information about this action" />
<TooltipButton label="Help" tooltip="Get help or documentation" size="lg" />
<TooltipButton label="Settings" tooltip="Adjust your preferences" size="sm" />
</div>
);
}
Dependencies
Published
Similar components
Explore more
Part of Ruixen UI — browse the full library on 21st.dev.