/
Tooltip

Tooltip

By default, most of the form.io components such as the ‘Number’ and ‘Text’ fields have a tooltip capability which displays information when a user hovers their cursor over it.

 

To add a tooltip to a component, simply click on Settings (gear icon), and add the tooltip text in the ‘Tooltip’ field under the ‘Display’ tab.

However, some fields such as the ‘Text/Images Component' do not have this capability. This limits CHEFS’ ability to display tooltips next to standalone text such as a heading. This limitation can be overcome by using an ‘HTML Component' and adding form.io’s own tooltip HTML class.

To achieve this, add an ‘HTML Element Component’ to your form and click on the Settings (gear) icon. Enter the following HTML code into the ‘Content’ field, replacing ‘HTML Tooltip’ with your custom text.

<h1 class="col-form-label" ref="label" style="font-size: 1.5em"> HTML Tooltip <i data-tooltip="This is a long tooltip containing important information." class="fa fa-question-circle text-muted" tabindex="0" ref="tooltip" aria-expanded="false" style="font-size: 20px"></i> </h1>

Related content

Form.io Customization
Form.io Customization
More like this
Calculated Fields
Calculated Fields
More like this
Advanced Progress Bar
Advanced Progress Bar
More like this
Progress Bar
More like this
Form Design Features
Form Design Features
More like this
Navigation Buttons
Navigation Buttons
Read with this