Formidable Forms

Formidable Forms

  • Features
  • Templates
  • Pricing
  • Resources
    • Docs & Support
    • Blog
    • Community
  • Solutions
    • Web Applications
    • Calculators
    • Surveys
    • Directories
    • Payments
    • Contact forms
  • Login
  • Get Formidable Forms

How to Add Tooltips

Knowledge Base → Forms → Examples → How to Add Tooltips

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.

Get Better Forms FREE!
 
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.
    Tooltip Form - Install WordPress Plugin

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

  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.
    Tooltip Form - Shortcodes Menu
  3. It will redirect you to the plugin documentation. Search for Tooltip from the list of available shortcodes and copy the shortcode.
    Tooltip Form - Available Shortcodes
  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]
  5. Step 2: Create a form to add Tooltip shortcode

  6. Go to Formidable → Forms and click Add New at the top of the page to create a form if you have not yet.
    WordPress Create Form Add New
  7. 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.
    Tooltip Form - Insert Shortcode Field Description
  8. Click the Update button to save your form. Publish the form on a page/post using a shortcode or HTML block.
    Tooltip Form - Publish Field Description
  9. 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.

  10. Install the Better Font Awesome plugin. You can either download the plugin from WordPress.org.
    Tooltip Form - Install Icon WordPress Plugin

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

  11. 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]

    Tooltip Form - Insert Icon Field Label

  12. Click the Update button to save your form. Publish the form on a page/post to preview the tooltip functionality.
    Tooltip Form - Publish
  • Requirements
  • Step 1: Install Tooltip plugin
  • Step 2: Create a form to add Tooltip shortcode
  • Step 3: Add icon to your Tooltip
Categories
×

Categories

  • Installation & Getting Started
  • Account Management
  • Forms
  • Entries
  • Views
  • Styles
  • Importing & Exporting
  • Add-Ons
  • Extend Formidable Forms

Using WordPress and want to get Formidable Forms for free?

Get Formidable Forms Lite Now

Submit doc feedback
Was this article helpful? *
What did you find most unhelpful? *

If you need help from our support team, please create a ticket at our helpdesk.

This article may contain affiliate links. Once in a while, we earn commissions from those links. But we only recommend products we like, with or without commissions.

Take on bigger projects Right Now

Get the tools you need to revolutionize your workflow and architect a masterpiece. Build the most advanced WordPress forms and actually use the data you collect in meaningful ways.

Get the most advanced WordPress form plugin and the only form builder with integrated Views.

Get Formidable Forms Now

Resources

  • Community
  • Affiliates
  • Contact
  • Free Online Form Builder

Top Features

  • Application Builder
  • Calculator Plugin
  • Surveys & Polls
  • Quiz Maker
  • Form Templates
  • Application Templates
  • Directory Plugin
  • Donation Plugin

Company

  • About Us
  • Giving Back
  • Careers
  • Newsletter
  • WP Tasty
  • Nutrifox

Copyright © 2023 Strategy11, LLC. Formidable Forms® is a registered trademark Strategy11, LLC.
Privacy Policy | Terms of Service | Sitemap

Join 300,000+ using Formidable Forms to create form-focused solutions fast. Get Started See User Reviews