Changing the tooltips

The form tooltips are created using the Tippy.js. See the sections below on changing the tooltips.

Changing the text of a tooltip

The tooltips become active when the form element has the class quform-tooltip and it uses the content of the data-tippy-content="" attribute of the form element. If you want to change the text of a tooltip, locate the form element in the HTML and change the data-tippy-content="" attribute to the text you want to display.

Adding or removing a tooltip

The tooltips become active when the form element has the class quform-tooltip and it uses the content of the data-tippy-content="" attribute of the form element. If you want to show a tooltip on an element that doesn’t have one already, add the class quform-tooltip to the form element and add a data-tippy-content="" attribute containing the text you want to display in the tooltip.

To remove a tooltip from an element that already has one, remove the class quform-tooltip from the form element and remove the data-tippy-content="" attribute.

Changing the look of the tooltips

You can change the CSS styles of the tooltip, this is found at the in the base stylesheet (base.css), search for .tippy-box[data-theme~="quform"] and add any desired CSS styles there.

Using a Help icon for the tooltip

There is an option to use a Help icon as the tooltip trigger. All you need to do is add the following HTML code inside the label.

1
<span class="quform-tooltip-icon quform-tooltip" title="Tooltip text here"></span>
<span class="quform-tooltip-icon quform-tooltip" title="Tooltip text here"></span>

The following example shows the tooltip HTML correcly added to a label:

1
2
<label for="first_name">First name <span class="quform-required">*</span>
<span class="quform-tooltip-icon quform-tooltip" data-tippy-content="Tooltip text here"></span></label>
<label for="first_name">First name <span class="quform-required">*</span>
<span class="quform-tooltip-icon quform-tooltip" data-tippy-content="Tooltip text here"></span></label>

The icon will change depending on the theme you are using and can be found in the theme image folder, quform/images/. If no theme is used it will be set to the default image found in the quform/theme/[theme]/images/.

Be inspired. © 2020 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy