Tooltip for Text Images Component - bcgov/common-hosted-form-service GitHub Wiki

This documentation is no longer being updated. For the most up to date information please visit our techdocs

Home > CHEFS Components > Custom Components > Tooltip

Examples

Try a working example
View example

Download this example file and import it into your design
example_tooltip_for_text_images_component_schema.json

Tooltip (Tutorial)

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.

tooltip1

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.

tooltip2

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.

tooltip3

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.

tooltip4

<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>

Back to top

⚠️ **GitHub.com Fallback** ⚠️