April 18, 2017

How to Add Tooltips to Your Blog

Create Tooltips - Feature Image -

When it comes to blogging we all know it’s important to make our sites as user-friendly and safe as possible. By adding content cards, reCAPTCHA, permalinks, auto-tags, grid layouts, etc. we are essentially making sure our sites are secure and easy to use. Adding tooltips is one more way to increase usability.

So, what exactly are tooltips, you ask? You know how sometimes when you hover your mouse over a button or link a small description of it will pop up? That, my friend, is a tooltip (a ‘tip’ for using that ‘tool’.) While these tips are typically used to label the button (think of a button that’s only a symbol and then the tooltip tells you it’s the ‘Add Table’ button), you can really make them say anything you’d like. For instance, some websites use them to show word definitions.

You can make a tooltip show your readers anything you’d like! Today, I’m going to walk you through setting up your own tooltips. I’ll show you exactly how easy and useful they truly are! Let’s get started!


Install WordPress Tooltip Plugin

  1. When you’re logged in to your WordPress dashboard, hover over the “Plugins” menu then click on “Add New” in the sub-menu that pops up.
  2. On the “Add Plugins” page, type “wordpress tooltip” in the search bar.

    Note: There’s a barrage of tooltip plugins. Depending on how you’d like to use your tooltips, you may find another plugin more suited to your needs. For the purpose of learning the basics of tooltips though, we’re going to install the WordPress Tooltips plugin.

  3. Click “Install Now” on the option “WordPress Tooltips”.
  4. Once installed, click on “Activate”. After activating, the page will redirect to the main “Plugins” page.



Create a New Tooltip

Now that the plugin has been installed and activated, you’ll see a new ‘Tooltips’ option in the WordPress admin menu.

Create Tooltips - Example 4 -

  1. First, you need to hover over the ‘Tooltips’ tab in the WordPress menu and click on ‘Add New’ in the sub-menu that pops up.
  2. You should now have the ‘Add New Tooltip’ editor displayed on the screen. It looks almost identical to the post/page editor with a few small differences. The first thing you need to do is give the tooltip a title. The title is the keyword that will have the tooltip attached throughout you site. For example, if I title my tooltip ‘Example of Tooltips’, every time that phrase is used on my website, the tooltip will appear.

    Note: For more advanced settings, there’s also a paid version of this plugin.

  3. Now that you have a title, you need to add some content. Type in whatever “tip” you want to give your readers.
  4. Next you can create/choose a category for this tooltip. You’ll notice the categories are similar to those you use for your posts. The difference being that these are specifically for categorizing your tooltips.
    Create Tooltips - Example 7 -
  5. The last step is to set your tooltip settings. In “Tooltips” menu click on “Global Settings”.
    • The first option, “Keyword Matching Mode” allows you to choose whether the tooltip will appear for either every instance of the keyword or on the first instance in each article.
    • The second option, “Enable Image Tooltips” allows you to choose whether you want the “alt text” attribute of an image to appear as a tooltip when an image is hovered over.
    • The third option, “Tooltips for Excerpt” gives you the option of having tooltips pop up when there’s a keyword in an excerpt. For example, if I had that option enabled, tooltips would pop up on my “Blog How-To’s” page whenever you hover over a post excerpt containing a tooltip keyword.
    • The last option in the free version of the WordPress Tooltips plugin is “Tooltips for Tag”. This option works the same as the “Tooltips for Excerpt” but for post tags.
      Create Tooltips - Example 8 -

This is an example of tooltips! Awesome, right?!

That’s it! You’re done! You now have tooltips on your post or page!

If you’re looking for a really cool way to use tooltips, go read my article How to Create a Website Screenshot. You’ll learn all about what a website screenshot is, why it’s useful, and how to use it!

Do you have any questions or comments? Let me know, I’d be happy to help!



Tooltips - Pinnable Image 1 -

Leave a Reply

Enjoying my blog? Please spread the word :)

error: Content is protected!!