[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
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!
Thanks! I don't think that's possible with the tooltip in Elementor. Maybe you can do a CSS hack to make it work. I recommend checking out the Tooltip from Crocoblock ( crocoblock.com/widgets/tooltip/ )if you need more advanced features.
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?
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?
Good question. I haven't explored how to do tooltips on sections or columns. I think most solutions are at the widget level. If you check out the tooltips from Crocoblock it only works on widgets: crocoblock.com/widgets/tooltip/
*[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?
![How to Use the Hotspot Widget in Elementor [PRO]](http://i.ytimg.com/vi/KWYDQvWlzl4/mqdefault.jpg)
![How to Use the Hotspot Widget in Elementor [PRO]](/img/tr.png)
Finally... what I need. It is unbelievable how difficult it is to find information about tooltips without css or java. Thanks.
this is one of the clearest concise instructions I have seen. thanks
[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
Thanks for this!
Awesome! Thats exactly what I need right now. Thank you!
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!
Thanks! I don't think that's possible with the tooltip in Elementor. Maybe you can do a CSS hack to make it work. I recommend checking out the Tooltip from Crocoblock ( crocoblock.com/widgets/tooltip/ )if you need more advanced features.
Outstanding
Your great and thanks for this great video, you save my time.😍
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?
Thanks! Yes adding the triangle shape to tooltips can be done but it will require additional CSS. I will add this idea to my list of future videos.
@@WickyDesign Thanks a lot!
Thank you very much !!
Amazing , Very helpful , this is what i look for 😊 Thanx
really useful! thanks
Helpful video! Should we make the tooltip activate ‘On Click’ rather than on ‘Hover’ in mobile view?
Thanks! Yes, "on click" will work correctly on mobile view.
Hi, can this be done without creating a transparent background image in Photoshop, and just selecting an icon?
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?
I haven't tried that yet, but I'm thinking if you use custom CSS positioning it could work.
Why the button widget of Ementor doesn’t have a tooltip field?
Good question! I recommend you open a feature request on their Github if you want this added to Elementor. github.com/elementor/elementor/issues
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?
Good question. I haven't explored how to do tooltips on sections or columns. I think most solutions are at the widget level. If you check out the tooltips from Crocoblock it only works on widgets: crocoblock.com/widgets/tooltip/
*[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?
It was confusing because the *Content* tab contains the same list of dropdwon options as the *Style* tab but with different settings.