How to Create Tooltip in Elementor (Without Add-on)

You’re in the right article; 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 Elementor without the help of any add-ons. 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.

For your reference, you can see the GIFs below:

Steps to Create Tooltip in Elementor

Step 1: Add the CSS Snippet

Well, creating a tooltip in Elementor is very easy. First, add the simple CSS snippet to the Additional CSS block on the WordPress Theme Customizer.

There are two ways to access the Additional CSS.

1. From the WordPress dashboard, go to Appearance -> Customize -> Additional CSS.
2. When previewing your content (page/post), go to the menu bar and click Customize -> Additional CSS.

Once you enter the Additional CSS block, please copy the simple CSS snippet below and paste it into the available field.

.tooltip{
  position: relative;
  display: inline-block;  
}
.tooltip .tooltip-text {
  visibility: hidden;
  width:240px;
  background-color: #a116b1;
  border-radius: 25px;
  color: #ffffff;
  font-size: 14px;
  box-shadow: 5px 5px 2px rgb(43, 113, 137);
  text-align: center;
  padding: 4px;
  position: absolute;
  z-index: 1;
}
.tooltip:hover .tooltip-text {
  visibility: visible;
}

Once you finish adding the CSS snippet, apply it by clicking the PUBLISH button.

Step 2: Add the Tooltip

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

Go to your Elementor editor and then insert Text Editor to your column. Add some text, edit, and style up as you prefer.

Once you add text/s to the widget, 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 “DESIGN.”

Next, we want to edit the text as HTML. Go to the widget settings and switch the text editor from Visual 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 “DESIGN.” 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.

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 the WordPress Theme Customizer.

The Bottom Line

This article shows how easily you can create the tooltip in Elementor without the help of any add-ons. It would be best if you were concerned when creating the tooltips because they must be relevant, informative, 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.