Tooltips are a great way to share information quickly and easily with users on your site. For example, a tooltip could show where a link takes the user or some other helpful content. But how do you create a tooltip in WordPress without using any external JavaScript or PHP libraries or even worse plugins that you don’t want? Let’s find out.

What is a tooltip?

A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element: Top. Right. Bottom.

W3C schools

When to use and when not to use a tooltip

Before you jump into creating your tooltips please check this list of when to use and when not to use a tooltip to get the best benefit out of them.

1. Don’t use tooltips for information that is vital for task completion.
   • For example, don’t hide the rules of password creation behind a tooltip or it hinders the user’s ability to complete their registration.
2. Don’t create information pollution
   • This simply means there is no need to add tooltips to things like buttons that have text or other elements that are self-explanatory. Though a button with only an icon should definitely have a tooltip to explain what it does when clicked.
3. Support keyboard and mouse
   • A common mistake developers make with tooltips is that they only support them using mouse hover, so when coding your own tooltip make it accessible with a keyboard as well.
4. Use arrows to point to what element the tooltip is about
   • When multiple elements with tooltips are closed by using small arrows (like in our example) to showcase which element the tooltip is about.
5. Use tooltips consistently
   • If you consider using tooltips around your site remember to be consistent. It helps users to use your site more confidently and stops them from getting confused when certain elements don’t have them.

Now you know when to use tooltips and how to use them correctly for the best results.

How to create a tooltip with CSS

To create a tooltip with just CSS we are going to need to use the attr() property. The attr() property holds the information of the tooltip. Here’s what the code will look like after we are finished:

Example Tooltip

If you hover over me, you can see the tooltip

…yes you can have multiple tooltips on same page

The code consists of three steps

1. Create a new class “tooltip” (though you can call it whatever you want)
2. Create a “:before” pseudo-element that contains the attr()
3. Create a “:hover” pseudo-class that will reveal the tooltip by changing its opacity from 0 to 1.

… and that’s it. Wasn’t it simple? But enough joking around and let’s look at some code examples. First, we are going to create the HTML. We just created this simple HTML for this example with a title and a paragraph.

<h1>Example Tooltip</h1>
<p>If you <span class="tooltip" tooltip-data="Place your tooltip content here">hover over me</span>, you can see the tooltip</p>

For the actual “functionality” we are going to need the following CSS which you should add to your themes style.css.

.tooltip {
  position: relative;
  border-bottom: 1px solid black;
}

.tooltip:before {
  content: attr(tooltip-data); 
  position: absolute;
  width: 150px;
  background-color: #000000;
  color: #fff;
  text-align: center;
  padding: 15px;
  line-height: 1.1;
  border-radius: 5px;
  z-index: 1;
  opacity: 0;
  transition: opacity .5s;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  font-size: 0.70em;
  visibility: hidden;
}

.tooltip:after {
  content: "";
  position: absolute;
  bottom: 75%;
  left: 75px;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  opacity: 0;
  transition: opacity .5s;
  border-color: #000 transparent transparent transparent;
  visibility: hidden;
}

.tooltip:hover:before, 
.tooltip:hover:after {
  opacity: 1;
  visibility: visible;
}

… and that’s it. You now have a working tooltip that you can edit to your liking by simply changing the CSS. Feel free to change the font size, tooltip size, and color to your liking.

Note – If you are using WordPress you can easily change your edit mode to “Edit as HTML” to add the class “tooltip” to the paragraphs you wish to use the tooltip with and it should work everywhere on your site.