Adding a tooltip to your form is helpful if you want to show additional details about a specific field that can be displayed in the field label or description.

Subscribe on YouTube

Requirements

• Shortcodes Ultimate
• Better Font Awesome

Step 1: Install Tooltip plugin

1. Install the Shortcodes Ultimate plugin. You can either download the plugin from WordPress.org.

   Or install it through WordPress dashboard. Go to Plugins → Add New. Search for Shortcodes Ultimate and click the Install Now button.

2. Once the plugin has been activated, go to your WordPress Dashboard and look for the Shortcodes menu. Go to About and click the View All Shortcodes button.
3. It will redirect you to the plugin documentation. Search for Tooltip from the list of available shortcodes and copy the shortcode.
4. Customize the tooltip shortcode as needed. Learn more about the available tooltip options.

   [su_tooltip title="Tooltip title" text="Tooltip content" position="top" background="#222222" color="#FFFFFF" font_size="16" text_align="left" max_width="300" radius="5" shadow="no" behavior="hover" class="" outline="yes" tabindex="yes" reference_tag="span" hide_delay="0"]Hover to open tooltip[/su_tooltip]

Step 2: Create a form to add Tooltip shortcode

5. Go to Formidable → Forms and click Add New at the top of the page to create a form if you have not yet.
6. In your form builder, select the field where you want to add the tooltip. Insert the tooltip shortcode in the field description or field label box.
7. Click the Update button to save your form. Publish the form on a page/post using a shortcode or HTML block.

Step 3: Add icon to your Tooltip

You can add an information icon such that when a user hovers over that icon, the Tooltip text is displayed. To set this up, follow the instructions below.

8. Install the Better Font Awesome plugin. You can either download the plugin from WordPress.org.

   Or install it through WordPress dashboard. Go to Plugins → Add New. Search for Better Font Awesome and click the Install Now button.

9. Once the plugin has been activated, return to your form builder and insert the icon shortcode.

   [icon name="info-circle"]

   In this case, you can add the icon in the field label. Insert the icon shortcode inside the tooltip shortcode right after your field label text.

   [su_tooltip text="The tooltip can be shown on mouse over or on click."][icon name="info-circle"][/su_tooltip]

   

10. Click the Update button to save your form. Publish the form on a page/post to preview the tooltip functionality.

Limitation

• Tooltips only work on the first row of repeaters. This means that if you have multiple rows in a repeater, the tooltips will not appear on rows beyond the first one.