There are times when you need to give your website’s users more information, but simply don’t have enough page real estate. You can always include links to other pages, but in many cases, the most convenient approach is to add a simple WordPress tooltip that displays all the information users need.
With a WordPress tooltip, also called a CSS hover tooltip, all the information visitors need is right there by ‘mousing over’ the right element.
In this article, we’ll show you some of our favorite examples of CSS hover tooltips in action. Then we’ll teach you how to add them to your website with and without plugins.
Let’s dig in!
An introduction to CSS hover tooltips
The concept of a WordPress tooltip is simple. They’re floating containers that ‘pop-up’ when you mouse over specific elements.
Usually, hover tooltips provide additional information you don’t want to include in the original design.
For example, if you’re building a pricing table, tooltips can help you break down what each feature does without bulking up the design:
Other use cases include word definitions, adding sources to your content, editorial comments, maps, and pretty much any other element you can think of.
Two ways to add a WordPress tooltip
WordPress enables you to use multiple approaches when it comes to adding tooltips to your website. You can either do so manually (which involves adding some code) or use a plugin.
We’ll start by showing you how to add tooltips with a free WordPress tooltip plugin. Then, we’ll dig into the manual CSS method.
1. Use a WordPress tooltip plugin
The whole point of using plugins is to save you time adding a feature manually. With this in mind, Shortcodes Ultimate offers one of the easiest tooltip implementations for WordPress users.
Once you enable the plugin, you get access to dozens of shortcodes you can use to add anything from buttons, to sliders, image carousels, dividers, etc.
Tooltips are, of course, among the
This article was written by John Hughes and originally published on ThemeIsle Blog.