Help Icon
Help Icon provides contextual guidance and explanations without cluttering the interface. It reveals helpful information on demand through a tooltip.
Loading preview…
1
<HelpIcon2
title="Work email preferred"3
description="Use your company email to be matched with your organisation's workspace automatically."4
placement="top"5
align="start"Installation
npx sdaia-ui@latest add helpicon
Usage
import { CarouselImage } from '@/components/ui/carousel-image';<CarouselImage images={images} />;Examples
Default
The default help icon with placement={top}.
Loading preview…
1
<HelpIcon2
placement="top"3
align="start"4
title="Tooltip title"5
description="Max width of tooltips is 240px - text will wrap automatically"Bottom
Help icon with placement={bottom}.
Loading preview…
1
<HelpIcon2
placement="bottom"3
align="start"4
title="Tooltip title"5
description="Max width of tooltips is 240px - text will wrap automatically"Right
Help icon with placement={right}.
Loading preview…
1
<HelpIcon2
placement="right"3
align="start"4
title="Tooltip title"5
description="Max width of tooltips is 240px - text will wrap automatically"API Reference
Help Icon Props
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 |