Search

How to Add Tooltip in WordPress Without Plugin

Need a way to add more information for certain words or other elements without taking up more space on your website page? Then you may want to add the tooltip feature to your website. A tooltip is an additional piece of information that shows up when you hover your cursor over an element or component.

This tutorial will show you how to add tooltips like the above animation to any words of your choice on your WordPress site. And this tutorial will also show you how to create a reusable tooltip if you need to add the tooltip many times like when you are making a hosting plan pricing page and want to add the tooltips for the elements in the plan.

How to Add Tooltip Without Plugin

Step 1: Add Additional CSS to Your Theme

To add a tooltip feature for your WordPress site without installing any additional plugins, you need to add our custom CSS classes to your theme by using the WordPress theme customizer then use that class for any word of your choice. To do so, start by navigating to Appearance Customize from your WordPress admin dashboard to open the theme customizer page (if you use a block theme, you can refer to this post to enable theme customizer on your website).

Once you’ve inside the theme customizer page, open up the Additional CSS block then add the following custom CSS inside the code editor, then click Publish.

.tooltip{
  position: relative;
  display: inline-block;	
}
.tooltip .tooltip-text {
  visibility: hidden;
  width:240px;
  background-color: #071e26;
  border-radius: 25px;
  color: #fff;
  box-shadow: 10px 10px 5px lightblue;
  text-align: center;
  padding: 6px;
  position: absolute;
  z-index: 1;
}
.tooltip:hover .tooltip-text {
  visibility: visible;
}

What the CSS snippet above do is declare the “tooltip” and “tooltip-text” CSS classes and then add some styling to the tooltip, hide the tooltip, and show it when you hover your cursor above the element that uses the CSS classes.

Step 2: Adding the Tooltips

Once you’ve added the additional CSS to your theme customizer, now is the time to add tooltips for the word you want. Start by editing one of your posts or pages and then using the “tooltip” class for the parent word and the “tooltip-text” to add the additional information in a tooltip box. To do so on the Gutenberg editor:

  • Select the block that contains the words you want to give the tooltip (e.g., the Paragraph block)
  • Open up the block Options by clicking on the vertical ellipsis
  • Select Edit as HTML from the options

For this tutorial, we will add tooltips to the first “Ghost” word and the “WordPress” word from the above screenshot. We do it like follows:

  • We’ve added <span> tag using the tooltip class for the “Ghost” word to set it as a word with a tooltip
  • Added an <span> tag again using the tooltip-text class before closing the previous one so this <span> tag will be the child of the previous one
  • Added some text for additional information that shows in the tooltip
  • Close the two codes using </span></span> tag

You can follow the above step for the word you want to give a tooltip. Once you’ve finished editing the block, you’ll most likely see an error. This error is expected if you modify the HTML of the block. To continue, you can convert the block to HTML by clicking on the More options which show as a horizontal ellipsis then select Convert to HTML.

Publish or preview your page or post once you’re finished adding the tooltips to see the result from the front end.

If you’re looking to expand your options for tooltip styles, a quick and simple solution is to visit a CSS tooltip generator website. These online tools allow you to adjust various options and generate a custom tooltip style that fits your needs.

And to use the style you’ve generated, you can follow these steps:

  • Copy the CSS code to your theme Additional CSS
  • Add the HTML code to your WordPress editor
  • Add the tooltip content in the data-tooltip
  • Add the tooltip word between the <span> tag

How to Add Reusable Tooltip

If you want to use the tooltip many times on your pages and you don’t like the idea of editing the HTML and its content when you create each tooltip like when you are making a hosting plan pricing page like follows:

You may want to use a shortcode to create those tooltips. Using shortcode to create a reusable tooltip saves you the trouble of editing each block into HTML and typing each of the tooltip content.

Before we start, you need to add the custom CSS from above to the theme customizer for the tooltip container and style and you may want to read our previous tutorial about creating shortcodes for your WordPress website if you want to know more about shortcodes.

For this tutorial, we will create a shortcode with an attribute to select the tooltip content so you don’t need to create many shortcodes for each different tooltip.

Step 1: Create the Shortcode

To create the shortcode, start by heading to your theme functions.php file on File Theme Editor from your WordPress admin dashboard, then proceed to add the following code to the editor.

function wpptooltip($atts= array(), $content= null){
	shortcode_atts(array(
		'info'=>'default'
	),$atts);
	$content= do_shortcode($content);
	//We use "info" as the attribute for the shortcode
	if(!empty($atts)){
		switch($atts['info']){
		case 'att_value': 
        $output = '<span class="tooltip">Parent word<span class="tooltip-text">tooltip content for the word</span></span>';
        break;
		//add more attribute and its value here		
   		default:
        $output = 'please input the correct attribute';
        break;	
		}
		return $output;
	}else{
		return "Please specify the attribute!";
	}		
}
add_shortcode('wptip','wpptooltip');

In the code above, we created the info attribute with “att_value” as the first value for the shortcode attribute. The shortcode you’ll use for the code above will look like follows:

  • [wptip info=”att_value”]

Which will display the following result from the front end.

Step 2: Add Your Tooltip Info

The next step is to add your own tooltip info and its parent word so you can display it using the shortcode with the corresponding attribute. Let’s start by adding the first option for the tooltip.

To do so, change the value of the switch case the 'att_value' case from the code on step 1 to your desired word which will become your first attribute.

Then continue by changing the tooltip parent word and the content for that attribute to your tooltip which you can achieve by overwriting the 'tooltip' word for the parent word and 'tooltip content for the word' sentence for its content from the $output variable.

Save the changes you made and your first tooltip should be ready to use by now. However, we still need to add more tooltip options for different words.

At this stage, adding more tooltip options is very easy. You just need to copy the code from the first case until the break; statement and paste the code below it. And then modify the case value, parent word, and the tooltip content like what you did to the first attribute.

Once you’ve added all the tooltips you want to the code, save the changes you’ve made to the file, and feel free to try adding the tooltip shortcode with the attribute that corresponds to the tooltip you want to display on your website.

The Bottom Line

Using tooltips, you can add more information for certain words or other elements without taking up more space on your website pages or posts. This tutorial shows you how to add tooltips to any words of your choice on your WordPress site and how to create a reusable tooltip if you need to add the tooltip many times on your page.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Hendri Risman

Hendri Risman

Hendri is a WordPress expert and a writer staff at WPPagebuilders. He writes solutions on how to get things fixed in WordPress a lot. Mostly without involving a plugin.
Want to save yearly expense up to $219? why not?

2 thoughts on “How to Add Tooltip in WordPress Without Plugin”

  1. Thanks for posting this. Looks like something I need.
    Is there a way to edit the CSS style after I added it? Is there a front end for this? Or do I need to go to the backend via FTP. If the latter, can you let me know where the file might be. I use Astra theme.

    Reply
    • Hi CS,
      You can edit the CSS you just added on Appearance → Customize → Additional CSS and publish it again.

      And we just updated this tutorial if you need an easy way to style your tooltip using a CSS tooltip generator website.

      Reply

Leave a Comment