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