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 JetTricks functionality.

Create marks on images using Hotspots widget and display additional information with 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 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.

hostspots-image

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-hotspots

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

hotspots-style

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.

tooltip-extension

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.

enable-tooltip

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

tooltip-settings

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

style-tooltip

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.

tooltip-example

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