Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How to Add Tooltips in Your WordPress Posts and Pages

Adding tooltips to your WordPress posts and pages can boost your content.

They provide extra information when your mouse hovers over specific words, helping clarify your message and make your content more user-friendly.

Tooltips offer an effective yet simple way to add depth to your posts without cluttering the text. By using tooltips, you can guide your readers and offer more context where needed.

In this article, we’ll show you how to add tooltips to your WordPress posts and pages.

Add tooltips to your WordPress posts and pages

Why Display Tooltips in Your WordPress Posts and Pages?

Tooltips display useful information in small boxes that pop up when you hover over an area on your WordPress site. They’re a great way to add clarity to your content.

You can use tooltips to add definitions of difficult words, highlight important facts, and reveal the sources of your information. Like footnotes, they can improve user experience and help build trust with your visitors.

However, tooltips should never be used for essential information. Your post should contain everything your readers need, even if they don’t read the tooltip, just in case they don’t see it.

You should also make sure you do not overuse tooltips, or they can become a distraction to your website visitors, which can ruin the user experience.

With that in mind, let’s look at how you can add tooltips to your WordPress posts and pages.

How to Add Tooltips in Your WordPress Posts and Pages

The first thing you need to do is install and activate the WordPress Tooltips plugin. To learn more, see our step-by-step guide on how to install a WordPress plugin.

Once the plugin is activated, there are several ways to add tooltips to your posts and pages. The first is to automatically add tooltips to certain keywords.

Adding Tooltips to Keywords Automatically

All you have to do is navigate to Tooltips » Add New to create a new tooltip. You need to start by adding a title.

This title is a keyword, and the tooltip will be automatically displayed everywhere the keyword appears in your posts and pages. This can save you a lot of time since you don’t need to manually add the tooltip in multiple locations across your site.

If you would like other words to also display the tooltip, then you can enter them in the synonyms section on the right of the screen. If you enter multiple synonyms, then they should be separated by the pipe symbol |.

Adding a new tooltip

Now, in the content section, add your tooltip. A tooltip might be only a few words long, or it could be several paragraphs of rich content with images and other media. However, keep in mind that you are writing content for a tooltip, not a full post, so keep it as brief as possible so it’s easily readable on any screen.

Once you’ve finished, you should click the ‘Publish’ button on the right of the screen. Now tooltips will be automatically displayed on your posts and pages wherever the tooltip’s title and synonyms are found.

Preview of Tooltip Automatically Added to a Keyword

Adding Tooltips Using Shortcode

Another way to add tooltips is to add a shortcode to the content of your posts and pages.

This method is suitable for shorter tooltips, or when you want to display the tooltip just once instead of on every matching keyword on your website.

If you’re new to shortcodes, then you can learn more in our beginner’s guide on how to add a shortcode in WordPress.

To add your tooltip shortcode, first, you need to open the post or page where you wish to add the tooltip in the content editor. Then you should add this shortcode where you wish the tooltip to be displayed:

[tooltips keyword="YOURKEYWORD" content="YOURTOOLTIPCONTENT"]

Simply replace YOURKEYWORD with the word or phrase you want to add the tooltip to and replace YOURTOOLTIPCONTENT with the text you want to add to the tooltip. Be sure to leave the quotes in the shortcode so that they work properly.

Adding a tooltip using shortcode

You can preview the page to see the tooltip in action.

This is how it appears on our demo site.

Preview Tooltip Added Using Shortcode

Building a Glossary From Your Tooltips

Each tooltip is a description of a keyword, similar to what you would find in a dictionary or glossary. As you go on adding tooltips, it is as if you are building a basic glossary.

This is why the WordPress Tooltips plugin allows you to display a glossary of tooltips on your website. Simply add the [glossary] shortcode to the post or page where you want it to appear.

Adding the Glossary Shortcode

After you have published the post or page, you can visit your website to see the glossary.

This is how it appears on our demo site. It includes the tooltips we added to the plugin’s tooltips list but not the tooltips we created using shortcode.

Preview of Tooltip Glossary

If you want to customize the glossary, then you can do so from the Tooltips » Glossary Settings menu in your WordPress dashboard.

Here you will find a number of options you can tweak on how the glossary will be displayed and what will be included.

Tooltip Glossary Settings

For example, you can choose whether or not to display images in the glossary, and you can list the ID of any tooltips you don’t want to include.

Bonus Tip: Survey Your Audience About Your New Tooltips

Creating a survey in WordPress is super useful for getting feedback from your visitors, which can help you better understand their interests.

If you run an online store, you can ask questions to learn what features people want in your products or services.

Or, if you have a WordPress blog, surveys are a great way to find out if your articles are helpful and what other topics your audience wants to read about.

Survey forms are also a versatile tool for gathering suggestions on improving the user experience.

Survey results in WPForms

With the tooltip feature, it can take a second or two to appear on the screen, so you may want to survey your site visitors to see if they actually notice them. You might also want to know if they’re helpful or distracting.

WPForms is the best form builder for creating WordPress surveys. You can use star ratings, the Likert scale, or a net promoter score for the various response types.

What’s more, you can choose from various user survey form templates to find the one that best suits your needs.

WPForms' customer feedback templates

If you want to learn more about creating survey forms, you can refer to our guide on how to create a survey in WordPress.

We hope this tutorial helped you learn how to add tooltips to your WordPress posts and pages. You may also want to see our guides on how to add icons for custom post types and how to add subtitles for posts and pages in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

14 CommentsLeave a Reply

  1. sasa

    I installed plugin and add new tooltip, entered content and now i dont know how to add it on a link

  2. jawadhyder15

    The plugin don’t work for me,

    But when i do this manually, it works!

  3. wpbeginner

    @shovan It works.

  4. shovan

    I dont think the plugin works on WP 3

  5. netcaststudio

    After installing the plugin the import of comments didn’t complete after 6 hours of running. Any thoughts?

  6. wpbeginner

    @dbroadaway the twitter icon is another plugin. Floating bar is the smart sharing plugin.

  7. dbroadaway

    Thanks for the write-up, but I have two unrelated questions:

    1: What is that Twitter icon next the Tooltip icon?

    2: I love your left-hand floating/static social media shares. Is that custom or a plugin/service?

    Thanks.

  8. wpbeginner

    @Jaxov An article is due for that.

  9. Jaxov

    @wpbeginner ;-) Offtopic: How happy are you with livefire comment system?

    How is it compared to other solutions? Also does it allow guest comments without registration?

  10. wpbeginner

    @mharis @Jaxov @Crysislevel Thank you Haris for posting this.

  11. Jaxov

    @Crysislevel I agree! Thanks for this.

    Btw you should maybe create an example page or preview in such posts so that we can see how it actually looks live.

  12. Crysislevel

    nice tutorial! thanx for this…i never knew how to do that! :)

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.