Changing the tooltips

The form tooltips are created using the qTip jQuery plugin. 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 title="" 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 title="" 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 title="" 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 title="" 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 title="" attribute.

Changing the look of the tooltips

The tooltip settings are contained in quform/js/scripts.js, near the top of the file.
The current style is set by the classes line show below.

classes: 'qtip-default qtip-shadow quform-tt',

We are using the default tooltip style qtip-default and adding on CSS3 shadows using qtip-shadow. If you want to change these settings then consult the documentation of qTip available at here.

You may also want to change the CSS styles of the tooltip, this is found at the in the base stylesheet (base.css), search for quform-tt.

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" title="Tooltip text here"></span></label>
<label for="first_name">First name <span class="quform-required">*</span>
<span class="quform-tooltip-icon quform-tooltip" title="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/.

Still having trouble? Head over to the forums.

Forums