Help Icon provides contextual guidance and explanations without cluttering the interface. It reveals helpful information on demand through a tooltip.
Loading demo: help-icon-real-world
npx sdaia-ui@latest add helpicon
import { CarouselImage } from '@/components/ui/carousel-image';<CarouselImage images={images} />;The default help icon with placement={top}.
Loading demo: help-icon-default
Help icon with placement={bottom}.
Loading demo: help-icon-bottom
Help icon with placement={right}.
Loading demo: help-icon-right
Props for the HelpIcon component.
Prop | Type | Default | Required |
|---|---|---|---|
placement | 'top' | 'bottom' | 'left' | 'right' | 'top' | optional |
align | 'start' | 'center' | 'end' | 'start' | optional |
open | boolean | - | optional |
onOpenChange | (open: boolean) => void | - | optional |
title | ReactNode | - | optional |
description | ReactNode | - | optional |
rtl | boolean | false | optional |