How to add tooltips to Gravity Forms
Gravity Forms does not include a dedicated front-end tooltip setting. Use a field description for simple contextual help, or add custom HTML, CSS and JavaScript for a hover or focus tooltip. For radio and checkbox choices, a tooltip plugin is usually the practical route.
- 01Open the form editor
- 02Add the built-in help text
- 03Style the description as a tooltip
- 04Handle choice-level guidance separately
- 05Check both Gravity Forms markups
- 06Use a tooltip plugin for speed
What you need
- A Gravity Forms form to edit
- Gravity Forms administrator access
- Access to Appearance → Customize or a child theme stylesheet if using custom CSS
- A staging site or recent backup for custom code
Open the form editor
In WordPress, open Forms and edit the form that needs help. Click the field you want to explain. Gravity Forms provides common settings such as Description, Description Placement, and Custom CSS Class for many field types.
Write short help text that answers one question. Explain an unfamiliar term, format, or choice rather than repeating the field label.
Add the built-in help text
Enter the guidance in the field’s Description setting, then choose whether it appears above or below the input. This is the simplest manual route and is often better than a hover-only tooltip because the help remains visible on touch devices.
Gravity Forms associates descriptions entered through the form editor with their controls using aria-describedby, so screen readers can announce the guidance with the field.
Style the description as a tooltip
If you need a visual tooltip, add a unique class such as has-tooltip in the field’s Custom CSS Class setting. Add CSS in the Customizer or child theme to hide the description by default and reveal it when the field or a help icon receives hover or keyboard focus. Gravity Forms documents the Custom CSS Class setting and recommends scoping styles to the form’s markup or theme wrapper.
This approach is still a custom build: CSS alone cannot reliably create a good click, focus, and mobile interaction. If you add an icon with an HTML field, include a usable label and make sure keyboard users can open and close the help.
Handle choice-level guidance separately
Field descriptions explain the whole radio or checkbox field, not each individual choice. For choice-specific help, you can place an HTML field near the choices and add explanatory text, but that is not a true tooltip attached to each option. HTML fields output the markup you enter and are display-only.
Do not hide essential instructions only on hover. Users on phones, keyboard users, and people using assistive technology must still be able to discover the meaning of every choice.
Check both Gravity Forms markups
Preview the form with a mouse, keyboard, phone, and screen reader. Test the tooltip while tabbing into the field, after validation errors, and on every page of a multi-page form.
Custom selectors can break when a form uses different Gravity Forms markup. Forms created under newer versions may use modern markup, while older forms can still use legacy markup; Gravity Forms warns that markup changes can affect custom CSS and code.
Use a tooltip plugin for speed
For the fast route, install and activate Gravity Forms Tooltips, then configure the tooltip content for the relevant fields from its settings. This is the better fit when you need hover, click, or focus triggers, responsive behaviour, or separate help for radio and checkbox choices without maintaining custom code.
Preview every tooltip on mobile and with the keyboard before publishing. Keep the wording brief, and leave required instructions visible in the form rather than placing them only inside a tooltip.
Let Gravity Forms Tooltips do it
Adds rich, field-level tooltips to Gravity Forms, including radio and checkbox choices; choose it for contextual guidance without custom code.
Sources
- docs.gravityforms.com /common-field-settings/?utm_source=openai
- docs.gravityforms.com /html-field/?utm_source=openai
- docs.gravityforms.com /changes-to-markup-in-gravity-forms-2-5/?utm_source=openai
- docs.gravityforms.com /field-object/?utm_source=openai
- docs.gravityforms.com /accessibility-for-developers/?utm_source=openai
Questions
- Does Gravity Forms have built-in front-end tooltips?
- No. Gravity Forms includes field descriptions, but these normally render as visible text above or below the input rather than as hover or click tooltips. Descriptions are useful for accessible contextual help because Gravity Forms associates them with the relevant control through <code>aria-describedby</code>. A true tooltip needs custom HTML, CSS and JavaScript or a dedicated add-on.
- Can I add a tooltip to each radio or checkbox choice?
- Not with the standard field description alone. That description applies to the field as a whole, while individual radio and checkbox choices do not have a normal per-choice description control. You can build custom markup and scripts, but a tooltip plugin is the practical option when every choice needs separate guidance.
- Are Gravity Forms field descriptions accessible?
- Yes, when you add them through the field settings, Gravity Forms connects the description to the form control with <code>aria-describedby</code>. Do not replace all visible help with a mouse-only hover effect. Make sure keyboard users can reach the trigger and that important instructions remain available without hover.
- Why did my tooltip CSS stop working after a Gravity Forms update?
- Your selectors may target the wrong markup version. Gravity Forms 2.5 introduced modern markup while older forms may still use legacy markup, and the two versions use different structures and theme classes. Scope your CSS to the actual form wrapper, check the form’s markup mode, and retest after updates.
- Should I use a plugin or custom code for Gravity Forms tooltips?
- Use the built-in description when plain, always-visible help is enough. Use custom code only when you need a small, controlled visual change and can maintain the CSS and JavaScript. Choose a tooltip plugin when you need field-level and choice-level tooltips, multiple trigger types, mobile support, or less maintenance.