EUIKit's help components allow you to build up an inline help system, which
the user can toggle on and off.
<x-euikit::help.toggle />
|
A button the user can press to hide/show inline help |
<x-euikit::help>
|
Inline help component |
EUIKit uses AlpineJS to toggle the inline help on a page.
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.