Dynamic help
Mobile behaviour
- Help text is toggled by a button.
Desktop behaviour
- Help text appears on hover.
- Help text hides on hovering another form item or outside of the form.
- Help text appears on focus and remains visible until the user clicks elsewhere or focuses on another field.
Markup
The class dynamic-help is added to the form-item wrapper.
<!-- START form-item-text_field_help_dynamic component -->
<div class="form-item form-item--text dynamic-help">
<label for="text_field">Text field:</label>
<input aria-describedby="idc661c1e4e2" type="text" id="ide09e6220ce" value="Example value"size="30" >
<div role="tooltip" id="idc661c1e4e2" class="form-item__description">Ullam aliquam earum eveniet sequi delectus omnis similique nobis et mollitia porro eligendi. Accusamus sit id qui odit consequatur.</div>
</div>
<!-- END form-item-text_field_help_dynamic component -->
Note: only text fields and radio fields are currently supported.
Make sure to include the appropriate form-item--* class on the form-item.