EUIKit's help components allow you to build up an inline help system, which the user can toggle on and off.

The <x-euikit::help.toggle /> component shows the control for hiding/showing inline help. It is rendered as a Button component, and takes all of its attributes. By default, the toggle will show as a simple question-mark-circle icon, with no text, in the "ghost" button style.

The <x-euikit::help>…</x-euikit::help> component can be used to add inline help anywhere on the page. Note that form components have their own "help" attribute (see below). This component can be used to add additional explanatory text where needed.

The help component takes one optional attribute, type, which can be used to draw attention to the inline help. Any of EUIKit's colors and types can be used. It defaults to the "ghost" type if not defined.

All of EUIKit's Form Components include a "help" attribute. The value of that attribute will be shown when help is toggled on. Each component renders the inline help inside their own <div> as appropriate. Form fields use the help component internally to render the text. To change the type of the help, use the helptype attribute. It defaults to the "ghost" type if not defined.

Example form with inline help