ContextualHelp

ContextualHelp attaches an unobtrusive help or info affordance next to a control. Pressing it opens a small popover with a title and explanatory content — the 'help' variant for guidance, 'info' for supplementary facts.

Import

import {
  ContextualHelp,
  Heading,
  Content
} from '@proyecto-viviana/solid-spectrum';

Variants

The variant selects the icon and its accessible label. Compose the popover body from a Heading (slot 'title') and Content.

<ContextualHelp variant="help">
  <Heading slot="title">Need help?</Heading>
  <Content>
    Your workspace name is shown across every panel and in shared links.
  </Content>
</ContextualHelp>

ContextualHelp Props

Props

Prop	Type	Default	Description
`variant`	'help' \| 'info'	`'help'`	Selects the trigger icon and its default accessible label
`size`	'XS' \| 'S'	`'S'`	Size of the trigger button
`placement`	string	`'bottom start'`	Preferred placement of the help popover
`children`	JSX.Element	—	A Heading with slot='title' and a Content block

Accessibility

The trigger is a labelled icon button carrying the variant's accessible name
Opening it reveals a dialog named by the Heading slot="title"
Focus moves into the popover on open and returns to the trigger on close
Escape or an outside click dismisses the popover
The help affordance does not interrupt the tab order of the control it annotates