### [How to Add Tooltips in WordPress (The Easy Way)](https://wpforms.com/how-to-add-tooltips-to-your-wordpress-forms/) **Published:** September 9, 2019 **Author:** Editorial Team **Excerpt:** Do you want to add tooltips to your form? Tooltips are little boxes that pop up when you hover over an area on your WordPress site, and they're great for adding extra info about a field without crowding things. In this post, we’ll show you how to add tooltips in WordPress. **Content:** Do you want to add tooltips to your form? Tooltips are little boxes that pop up when you hover over an area on your WordPress site, and they’re great for adding extra info about a field without crowding things. In this post, we’ll show you how to add tooltips in WordPress. [Create Your WordPress Form Now](https://wpforms.com/pricing/) ### What’s a Tooltip in WordPress? Tooltips are hints, glossary terms, or messages that pop up when your visitor hovers over or touches (on mobile devices) an element on your WordPress website. And in your WordPress forms, tooltips can be used to add extra information about a particular field. For example, take a look at the screenshot below. ![tooltip sample](https://wpforms.com/wp-content/uploads/2017/07/tooltip-sample.gif) WPForms lets you easily add a description for each field in the form builder. Unlike a typical field description, tooltips are hidden by default. It only appears when your user wants to know more details about a certain field by hovering over the field description. Adding a tooltip is a great idea if you want to provide more details about a certain field without creating unnecessary distractions on your form. Now that you know what a tooltip is, read on to find out how to add them to your site. ### Installing a WordPress Tooltip Without a Plugin Yes, it’s possible to install a WordPress tooltip without a plugin. However, if you don’t want to use a tooltip plugin to easily add a tooltip to your WordPress site, you’ll need to be an advanced user and use html or jquery (or hire a developer to do it for you). Luckily, you can save yourself time and money by using a tooltip plugin. For WPForms users, we recommend the [free Shortcodes Ultimate plugin](https://wordpress.org/plugins/shortcodes-ultimate/). Shortcodes Ultimate is easy to use and works great with the [most popular and best WordPress themes](https://wpforms.com/best-free-wordpress-themes/). This wildly helpful and [free WordPress plugin](https://wpforms.com/best-free-wordpress-plugins-for-your-website/) will give you 50+ shortcodes to use to easily add various functions to your site, including the tooltip shortcode. Up next, we’ll show you exactly how to add this WordPress tooltips plugin. ## How to Add Tooltips in WordPress Let’s take a look at the step-by-step guide on how to add tooltips in WordPress. ### Step 1. Create a WordPress Form The first thing you need to do is [install and activate WPForms](https://wpforms.com/pricing/) on your site. If you need help, check out this guide on [how to install a WordPress plugin](http://www.wpbeginner.com/beginners-guide/step-by-step-guide-to-install-a-wordpress-plugin-for-beginners/). Then, you’ll need to [create a simple form in WordPress](https://wpforms.com/how-to-create-a-contact-form-in-wordpress/). ![The WPForms form builder](https://wpforms.com/wp-content/uploads/2019/09/WPForms-Form-Builder.png) Great job creating your form. We’ll come back to it in a later step. ### Step 2. Install the Shortcodes Ultimate Plugin Next, [click here to go to WordPress and download the free Shortcodes Ultimate plugin](https://wordpress.org/plugins/shortcodes-ultimate/). ![The WP Shortcodes Ultimate page in the WordPress repo](https://wpforms.com/wp-content/uploads/2019/09/WP-Shortcodes-Ultimate.png) Or if you’re already in your WordPress dashboard, click on **Plugins** » **Add New**, search for Shortcodes Ultimate, and click **Install Now**. ![Install Shortcodes Ultimate](https://wpforms.com/wp-content/uploads/2019/09/WP-Shortcodes-Ultimate-Repo.png) Once the plugin is activated, you’re ready to start using it. ### Step 3: Get Your Tooltip Shortcode Now, find the Shortcodes Ultimate plugin on the left-hand side of your WordPress dashboard and click on **Available shortcodes.** Scroll down that page and select the **Tooltip** button. ![select the tooltip](https://wpforms.com/wp-content/uploads/2019/09/select-the-tooltip.jpg) On the next page, highlight and copy the shortcode: ![copy tooltip shortcode](https://wpforms.com/wp-content/uploads/2019/09/copy-tooltip-shortcode.jpg) ### Step 4: Add Your Tooltip to Your Form Now that you have your tooltip shortcode, it’s time to add it to your Simple Contact Form. Head back into your form by clicking on **WPForms »** **All Forms** and then select **Edit** under the form where you’d like to add your tooltip. ![edit your simple contact form](https://wpforms.com/wp-content/uploads/2019/09/edit-your-simple-contact-form.jpg) Once you’re on the form, click on the field you’d like to add your tooltip to and paste your tooltip shortcode into the description box. ![add shortcode to description](https://wpforms.com/wp-content/uploads/2019/09/add-shortcode-to-description.jpg) Once you save your form and view it from the frontend, it will now display the tooltip: ![display the tooltip](https://wpforms.com/wp-content/uploads/2019/09/display-the-tooltip.jpg) ### Step 5: Customize Your Tooltip You can also modify the code to display your own text. Here’s an example with the changes made in bold: ``` [su_tooltip style="yellow" position="top" shadow="no" rounded="no" size="default" title="" content="This is the content area which will be shown in the Tooltip bubble after the user hovers over it!" behavior="hover" close="no" class=""]This is the text that will be always be displayed and will show the Tooltip content when hovered over![/su_tooltip] ``` ![customized tooltip](https://wpforms.com/wp-content/uploads/2019/09/customized-tooltip.jpg) You can also change a bunch of different options in your tooltip settings which you can find by scrolling to the bottom of the **Shortcodes** » **Available shortcodes** page like: - Style + Colors - Position - Size - Behavior - And more The next step is optional but will make your tooltip look even more customized and keep your forms even more clean and distraction-free. ### Step 5: Turn Your Tooltip into an Icon (Optional) Unless you specifically state and invite people to hover over your tooltip in your tooltip shortcode, your visitors may not even realize that there’s extra content waiting to be shown in that tooltip! A great way to make sure your readers hover over the tooltip is to make it an icon instead of just using text. For example, many people add an “i” information icon and then when the user hovers over that icon, the tooltip displays. How snazzy is that? ![final tooltip display with icon](https://wpforms.com/wp-content/uploads/2019/09/final-tooltip-display-with-icon.jpg) To do this, first, download and activate the [free Better Font Awesome plugin](https://wordpress.org/plugins/better-font-awesome/). If you jumped straight to this part of the post, here’s a link to [how to install a WordPress plugin](http://www.wpbeginner.com/beginners-guide/step-by-step-guide-to-install-a-wordpress-plugin-for-beginners/) if you need it. ![icon on tooltip plugin](https://wpforms.com/wp-content/uploads/2019/09/icon-on-tooltip-plugin.jpg) Once the plugin is activated, you’ll have access to [thousands of free icons](https://fontawesome.com/icons?d=gallery&m=free) that you can use anywhere on your WordPress site with a simple shortcode. Now, let’s go ahead and add the Info icon’s shortcode to our tooltip. We’re about to put one plugin’s shortcode inside another plugin’s shortcode. But don’t worry, they’ll both still work! Head back to your form’s Field description box that contains your tooltip and simply replace the displayed text inside your tooltip shortcode with this shortcode: ``` [icon name="info"] ``` The text area you should replace with the above shortcode is highlighted below: ![replace this text with the better front awesome shortcode](https://wpforms.com/wp-content/uploads/2019/09/replace-this-text-with-the-better-front-awesome-shortcode.jpg) And here’s what the code should look like once you’ve added the icon shortcode: ![better font awesome shortcode added](https://wpforms.com/wp-content/uploads/2019/09/better-font-awesome-shortcode-added.jpg) Alternatively, you can just copy and paste the below shortcode into your description box and tweak it to your liking. ``` [su_tooltip style="yellow" position="top" shadow="no" rounded="no" size="default" title="" content="Tooltip text" behavior="hover" close="no" class=""][icon name="info"][/su_tooltip] ``` Next, save your form and check it out on the frontend to see your tooltip icon. ![final tooltip display with icon](https://wpforms.com/wp-content/uploads/2019/09/final-tooltip-display-with-icon.jpg) Great job! Now, if you’d like to get even more advanced and place the tooltip icon above the field next to the label, check out our [in-depth tutorial on how to add icons to WordPress forms](https://wpforms.com/docs/how-to-add-icons-to-wordpress-forms). ### Final Thoughts That’s it! You now know how to add tooltips in WordPress. If you want to change the look of your forms’ buttons, read [how to customize button styles with CSS](https://wpforms.com/how-to-customize-button-styles-with-css-with-examples/). Or if you prefer, see our guide on [how to style WPForms with CSS Hero (no coding required)](https://wpforms.com/docs/how-to-style-wpforms-without-knowing-any-code/). What are you waiting for? Get started with the [best WordPress forms plugin](https://wpforms.com/pricing) today. If you like this article, then please follow us on [Facebook](https://facebook.com/wpforms) and [Twitter](http://twitter.com/easywpforms) for more free WordPress tutorials. **Categories:** WordPress Tutorials **Tags:** add a hint, shortcodes, tooltips, wordpress form ---