Back to contents

How to add hotspots and tooltips to any widget or image

This tutorial guides you to add hotspots and tooltips to any widget or image using the JetTricks plugin functionality.

Create marks on images using the Hotspots widget and display additional information with the Tooltip one.

Creating hotspots on image

Step 1 — Let’s open the page, where you want to add hotspots on the image, in Elementor editor.

Step 2 — The first thing you need to do here is to go to the elements panel and scroll all the way down until you see Hotspots widget. You can guess you’ll need to drag the widget on a new section.

Hotspots widget

Step 3 — Now it is necessary to choose an image, that you want to be a base for your hotspots, in Content > Image block.

Image content settings of the Hotspots widget

Step 4 — As you can see, a hotspot is created by default. Let’s go to the Hotspots block and press Item #1. In the appeared window it is available to change an icon, add text, description and a link. Moreover, you can select one of the animation effect, which will be applied to the appearance of this specific hotspot. You can add as many items as you wish just clicking the Add Item option. If you switch to Position tab you will be able to adjust position settings.

hotspots-settings

Step 5 — In Tooltip block, you will find varied options for customizing the description of the hotspot.

tooltip-settings

Step 6 — If you open Style section there are style settings of hotspots and tooltips.

style settings for the Hotspots widget

Step 7 — When all adjustments are set, update the page and have a look at the image on the frontend. Hover on the hotspot and the tooltip will appear right away.

hotspots-example

Adding tooltip effect to one of the widgets

Step 1 — Firstly, check whether the Tooltip extension is enabled in Elementor > JetTricks Settings > Available Extensions in the WP Dashboard.

JetTricks Settings in WP dashboard

Step 2 — Now go to Elementor editor and open the settings block of the appropriate widget, which you would like to add the tooltip to. Switch to Advanced > JetTricks section and enable the tooltip option.

JetTricks section for the Banner widget

Step 3 — After that, you can specify the description text, set varied options, such as placement, offset, Z-Index of the tooltip in the Settings tab.

Z-Index of the tooltip in the Settings tab

Step 4 — If you unfold the Style tab, there are a lot of settings for styling the appearance of the tooltip.

Style tab for the Tooltip widget

Step 5 — When you have customized the tooltip effect, click the Update button and take a look on the page, where the widget with tooltip is.

customized the tooltip effect

Well done! Now you are able to create hotspots and tooltips for the image and widgets with the help of JetTricks plugin.