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.

Form with dynamic help

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.

Suscipit et harum dolores magnam sed ex et natus sequi in pariatur earum velit impedit.
Radio buttons (block):
Radio buttons (block):

Another form with dynamic help