How to add Tooltips in Elementor Pro

In this video I will show you how to use Elementor Pro to create custom icon tooltips. I wanted to make this video to see if I can use the Elementor hotspot widget to make an icon tooltip.

I've tried to use other tooltip plugins to pull this off but I couldn't find a good solution.

Timestamps:
0:00 Introduction
1:20 Create Transparent Background in Photoshop
2:16 Elementor Hotspot Widget
8:30 Inline Positioning Tutorial

Download Font Awesome Icons:

#Elementor #ElementorTutorial #Tooltips

Our Recommended Tools
Some of the links on this page are affiliate links, meaning we may receive a commission if you follow them. This allows us to continue providing free content and educational resources for you. Thank you for supporting our small business!

WORDPRESS PLUGINS:

BUSINESS TOOLS:

GRAPHICS:

WEBSITE HOSTING:

------

[attila.szelei]

Finally... what I need. It is unbelievable how difficult it is to find information about tooltips without css or java. Thanks.

[bodes]

this is one of the clearest concise instructions I have seen. thanks

[borisnieminen]

[EDIT...} SOLVED!! I found the setting to adjust the tooltip length with wordwrap selected. It was buried under the "Hotpsot" tab settings, position tab, but oddly not placed under the "Tooltip" tab settings, where one would expect to find it. Works perfectly. Thanks....]

Thanks, excellent tutorial! I am using the hotspot widget with images with their captions displayed upon triggering the hotspot. The issue is the tooltip text is not responsive. If I have a particularly lengthy caption/description, the only way to display properly on mobile is to insert line breaks but that also introduces line brakes on the desktop, which breaks the design. The desktop view may require 2 lines of caption in a streamlined design, but the mobile view, in order to display all the text, I may need 5 lines. This won't look very nice on the desktop. I have tried CSS, that will turn off the line breaks in desktop: "selector br{ display: none;" which works, but I still need two or three line breaks for desktop. So this way it becomes a bit convoluted, requiring certain line breaks to be active, and some inactive across desktop and mobile. I was hoping there would be a simpler solution. Hope you may have some ideas. Thanks

[eventbazaar_net]

Your great and thanks for this great video, you save my time.😍

[axelriethmuller]

Awesome! Thats exactly what I need right now. Thank you!

[adeladili]

Amazing, Very helpful, this is what i look for 😊 Thanx

[peterm]

Helpful video! Should we make the tooltip activate ‘On Click’ rather than on ‘Hover’ in mobile view?

[striveimpact]

Great tutorial! Thank you! Any idea how to make the whole image show the tooltip (without building a separate popup for each image)? i.e. I would like to use the Tooltip for the main image, but have the whole image be clickable. I.e. in the start of your tutorial, you show drapes as the hotspot, but what if I wanted to just have the whole image of the room be clickable and show the tooltip? Thanks in advance for any help!

[faizrehman]

Nice one! I've a question though: How can we add that tooltip kind of triangle shape to navigation menu items when we hover over it?

[borisnieminen]

Hi, can this be done without creating a transparent background image in Photoshop, and just selecting an icon?

[webchez]

Why the button widget of Ementor doesn’t have a tooltip field?

[ridhishkanara]

say if i want to use a tooltip, for example I have an icon placed somewhere on the page and when hovered the item displayed has to be on some other spot in the view port. is that possible an dhow?

[rehmankureshi]

how can we create a tool tip for any column or section or any element in elementor. e.g: like when a user hover over any section, colum or any element a small text appears only on hover and than disappear when the mouse cursor moves away?

[crowlsyong]

*[SOLVED]*
Solution: Click the style tab

Problem:
4:48 the left sidebar contains no "Box" settings.
4:50 the left sidebar magically contains "Box" settings.

How can I replicate this behaviour?