Search

How to Create Tooltip in Divi

If you’re looking for an idea to give your users additional explanations or maybe guides on the specific text without interrupting the user’s workflow, adding a tooltip might be the best solution.

This article will show you how to create a tooltip in Divi without the help of any plugins. Tooltips can be triggered in two ways; hover and click. Commonly, tooltips triggered by hover are more often found on websites. So, this article will focus on the tooltip triggered by hover, which means a tooltip will appear when users hover over specific text.

Steps to Create Tooltip in Divi

Step 1: Add the CSS Snippet

First, we will add a custom CSS to the Divi Theme. On your WordPress dashboard, go to Divi -> Theme Options. Once you enter the Divi Theme Options page, navigate to the General tab -> Custom CSS section.

Copy the CSS snippet below and paste it into the Custom CSS field.

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

Once you add the CSS snippet into the Custom CSS field, apply the changes by clicking the Save Changes button.

Step 2: Add the Tooltip

Alright, now we will add the tooltip to your text module. As mentioned, we will make a tooltip appear when users hover over specific text.

Go to your Divi Builder editor, and we will start everything from scratch, so create a section with a single column, select the Text module, and insert that module into the column. Add some text, edit, and style up as you prefer.

Once you add texts to the module, choose a specific word/s you want to be set as a tooltip trigger when hovering. In this example, we will add a tooltip to “Aqua Charter Boats.”

Next, we want to edit the text as HTML. Go to the module settings and switch the text editor to Text mode.

Once you switch the text editor to text mode, we will input several things into the text editor, as below:

  1. Add the <span> tag using the tooltip class for the “Aqua Charter Boats.” to set it as a word with a tooltip, this <span> tag will be a parent.
  2. Add the <span> tag again using the tooltip-text class before closing the previous one (parent), so this <span> tag will be the child of the previous one.
  3. Add some text for additional information that shows in the tooltip.
  4. Close the two codes using </span></span> tag.

You can follow the steps above for another word/s you want to give tooltips.

That’s it. If you are happy with the appearance of the tooltip (as in the GIF above), you can keep it like this. But if you want to customize it, such as the width value, background-color value, border radius value, text color value, font size value, etc. You can edit the values in the CSS snippet you added on Divi Theme Custom CSS.

The Bottom Line

This article shows how easily you can add the tooltip in Divi Builder without the help of any plugin. For adding tooltips to your pages, please ensure that your tooltips are informative, relevant, and engaging.

The tutorial we gave you in this article is how to add a disposable tooltip. This means you need to edit the HTML for each specific text to add a tooltip. If you want to learn how to add a reusable tooltip, please click here; it will direct you to that subject.

If you often create WordPress websites with Divi, you can use Divi Cloud for time efficiency. You can store your Divi assets (layouts, theme builder templates, code snippets, etc.) in the cloud, and you can access that from any website you create.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to save yearly expense up to $219? why not?

Leave a Comment

Save your Divi assets to the cloud and access them from anywhere.