Dynamic help for forms
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 form--dynamic-help is added to the surrounding form tag.
The class dynamic-help is added to the form-item wrapper.
<form class="form--dynamic-help">
<!-- START form-item-text_field_help_dynamic component -->
<div class="form-item form-item--text dynamic-help">
<label for="id46816dcbae">Text field:</label>
<input aria-describedby="ide94613008e" type="text" id="id46816dcbae" value="Example value" size="30" >
<div role="tooltip" id="ide94613008e" class="form-item__description">Dolores enim voluptas harum nostrum voluptate dolores ut praesentium cum expedita. Est eos cupiditate repudiandae ut voluptatibus qui blanditiis aut. Nemo voluptatibus itaque officiis voluptatem omnis dolor consequatur et dolorem praesentium debitis iure est. Molestiae qui voluptas voluptatibus dolore tempora architecto temporibus omnis praesentium blanditiis neque esse. Eum eligendi laboriosam ratione iste laborum molestiae enim qui aperiam illo expedita rerum est.</div>
</div>
<!-- END form-item-text_field_help_dynamic component -->
</form>Make sure to include the appropriate form-item--* class on the form-item.
Example use in container with overflow: hidden (general)
Aliquam sunt qui iure autem dolor ullam autem quas doloribus est exercitationem nemo. accusantium itaque facere explicabo fuga aperiam est nam incidunt hic architecto ea aliquid. libero quam iusto autem porro molestiae
Omnis porro sed dolores. quae dicta sit incidunt quia eum possimus dolores consequatur vero earum quod qui. tenetur iure qui voluptas rerum culpa iure veritatis eligendi tempore omnis similique vel. quam voluptates sint ipsum fuga est suscipit. quo eos deserunt iste dolor modi incidunt distinctio ad. ex eos velit nobis
Minus vel consequuntur voluptatibus quis qui nemo voluptatum atque iste ea sint sit harum. aut porro nemo totam qui velit et nobis qui occaecati nisi molestias. expedita ipsam quas est consequatur quas ut quod. fugiat quibusdam animi omnis. suscipit debitis quos eveniet recusandae similique mollitia consequuntur eos minima consectetur perspiciatis reprehenderit dolorum. dignissimos id soluta cupiditate sunt qui voluptatem nam est hic et. est quidem aut in est quisquam quia optio est est deleniti aut cum ea
Et sunt reiciendis omnis et nesciunt voluptas veniam est ut fuga laudantium dolorem tempora aperiam. perspiciatis est aperiam ut reiciendis dolore sit quos est. aut labore blanditiis ea tempore incidunt aliquam. et optio exercitationem quas molestias et optio voluptates et sit