D
Design System
Design System/Atoms/Help Tooltip

Help Tooltip

Inline help trigger with tooltip content and optional learn-more link.

When To Use

  • Use Help Tooltip when content needs to appear in context without forcing a full page transition.
  • Match the overlay type to the weight of the task: lightweight guidance for hints, stronger containment for focused tasks.
  • Review the examples below to compare trigger styles, content density, and dismissal expectations.

When Not To Use

  • Do not move a full workflow into an overlay if the user needs persistent navigation, rich context, or deep editing space.
  • Do not rely on an overlay for critical messaging when it can be missed, dismissed accidentally, or blocked by focus issues.

Accessibility Notes

  • Move focus into the overlay when it opens and return focus to the trigger when it closes.
  • Support Escape to dismiss non-destructive overlays and ensure the trigger communicates expanded state where appropriate.
  • Do not hide critical actions behind hover-only disclosure; keyboard and touch users need equivalent access.

Key Props / API

Props

text, learnMoreUrl, learnMoreURL, placement, className, contentClassName

Key exports

HelpTooltip, type HelpTooltipProps

Example Code

import { HelpTooltip, Label, Input } from "@hilum/ui"

<div className="grid gap-2">
  <Label htmlFor="slug">
    Public slug
    <HelpTooltip text="This value is used in the public URL. Keep it short and stable." />
  </Label>
  <Input id="slug" defaultValue="summer-drop" />
</div>

Inline Help

Label help

Adds contextual help without forcing helper text into the layout.

Learn More

Redirect behavior