Search

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.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Picture of 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?

4 thoughts on “How to Create Tooltip in Elementor (Without Add-on)”

  1. The Elementor text editor seems to ignore “span” tags and just strips them out.

    I have had some success with for psuedo tooltips, but again Elememtor’s editor aggressively strips out any contained formatting.

    Seems like I just have to put up with a blob of text in tooltips if I am using Elementor’s Text Editor?

    Reply
    • Oopsie. I used the tags in my reply and didn’t think og them being auto-translated, sorry.
      Hmmmm, how do I do this so it just displays the syntax?

      “{abbr title=”xyz”}hover me{/abbr}”

      Reply
      • and yes, the text editor was switched to text mode. Any ‘span’ tag gets ignored and then whenever I flick back to visual and then back to text, the parser has dropped the opening span tag….. I’ve just given up on it as I wasted too much time for zero forward progress already….

        Reply

Leave a Comment

Haven’t used Elementor Pro yet?