{"id":10163,"date":"2019-06-12T08:06:10","date_gmt":"2019-06-12T08:06:10","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=10163"},"modified":"2025-11-13T08:49:09","modified_gmt":"2025-11-13T08:49:09","slug":"how-to-add-hotspots-to-image","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-hotspots-to-image\/","title":{"rendered":"How to Add Hotspots to the Image"},"content":{"rendered":"
<\/svg><\/div>
Things to know<\/div>

A hotspot is a mark placed on the image to focus the user\u2019s attention on a specific part of it. They are usually used in online stores to give users links to products they see in photos. Hotspots are also commonly supported by tooltips that display some additional information.<\/p><\/div><\/div>\n\n\n\n

Add the Hotspot Widget<\/strong><\/h2>\n\n\n\n
\n

Go to the dashboard of your site and look at the page or post where you want to add an image with hotspots. Proceed to edit it with Elementor. <\/p>\n\n\n\n

Find the <\/strong>Hotspots<\/strong><\/a> widget in the left-side widget menu. Drag and drop it to the page.<\/p>\n\n\n\n

\"adding<\/a><\/div>\n<\/div><\/div>\n\n\n\n

Configure the Image Settings<\/strong><\/h2>\n\n\n\n
\n

Once the widget is added to the page, the Image<\/strong> tab will be unrolled by default. <\/p>\n\n\n\n

Here, click the Choose Image<\/strong> field and select an image that you want to be the base for your hotspots. <\/p>\n\n\n\n

After that, the size of the image needed is set. In this case, we select the \u201cCustom\u201d Image Resolution<\/strong>, set the \u201c500\u201d Width<\/strong> and the \u201c500\u201d Height<\/strong>, and click the \u201cApply<\/strong>\u201d button. <\/p>\n\n\n\n

Finally, choose the required Alignment<\/strong>.<\/p>\n\n\n\n

\"configuring<\/a><\/div>\n<\/div><\/div>\n\n\n\n

Configure the Hotspot Settings<\/strong><\/h2>\n\n\n\n

The first toggle, called Use JetEngine query<\/strong>, allows you to use the Custom Query<\/strong> created with the JetEngine\u2019s <\/em>Query Builder<\/strong><\/a> as a source for the carousel. <\/p>\n\n\n\n

When the Use JetEngine query<\/strong> toggle is on, the new Select Query<\/strong> input appears. Choose the needed custom query from the dropdown list. <\/p>\n\n\n\n

\"use<\/a><\/div>\n\n\n\n
\n

When the custom query is used, you need only one Item <\/strong>to be set. Use the one that is added by default. Thus, the Hotspot<\/strong> widget enables you to display a list of results from a Custom Query<\/strong>, where only one item should be set as a template.<\/p>\n\n\n

<\/svg><\/div>
Things to know<\/div>

Ensure you have the 1.5.7 version of the JetTricks<\/em> plugin installed to utilize the JetEngine<\/em> query<\/strong> as a source for the Hotspot<\/strong>.<\/p><\/div><\/div>\n\n\n\n

When you need to set the Hotspot <\/strong>manually, proceed to the Item<\/strong>\u2019s settings. <\/p>\n\n\n\n

\"the<\/a><\/div>\n\n\n\n

First, you can change the content or position of the hotspot here<\/span>. Here, we start with the position and then move to the Style tab, using the Horizontal Position (%) and Vertical Position (%) switchers to place the first hotspot item. You can either move the hotspot by dragging the sliders horizontally or type in the values as percentages.<\/p>\n\n\n\n

\"configuring<\/a><\/div>\n\n\n\n

After that, we navigate to the Content <\/strong>tab. Here, we click the \u201cIcon<\/strong>\u201d <\/strong>button and choose one from the icon library. Next, we enter the necessary Text<\/strong>, which will be displayed directly on the hotspot by the icon. Additionally, we add the Description <\/strong>\u2014 the text that will be shown as a tooltip for this hotspot. <\/p>\n\n\n\n

If you want users to instantly see all the Description <\/strong>texts without having to hover or click, enable the Show Tooltip on Init<\/strong> toggle. If you prefer the hints to appear only when interacted with, leave it disabled. After that, we add the Link <\/strong>where the user will be led when they click on the hotspot.<\/p>\n\n\n\n

\"hotspot<\/a><\/div>\n\n\n\n

If needed, you can return to the Style <\/strong>tab and correct the position of the hotspot.<\/p>\n\n\n\n

Finally, add as many items as needed by clicking the \u201cAdd Item<\/strong>\u201d button. Additionally, you can select one of the animation effects, which will be applied to all hotspots. Six animation types will be shown in the \u201cwaiting mode,\u201d when the user doesn\u2019t hover the pointer over the image.<\/p>\n\n\n\n

\"hotspot<\/a><\/div>\n<\/div><\/div>\n\n\n\n

Configure the Tooltip Settings<\/strong><\/h2>\n\n\n\n
\n

In this step, unroll the Tooltip<\/strong> tab. As was said previously, the text to be shown as a tooltip should be entered into the Description<\/strong> text area of the Hotspot<\/strong> item. Here, we set the following.<\/p>\n\n\n\n

First, we disable the Show All Tooltips on Init<\/strong> toggle to make tooltips visible only when hovering. When the toggle is on, all tooltips will be visible as soon as the page loads.<\/p>\n\n\n\n

Next, we enable the Interactive Tooltip<\/strong> toggle to allow interactions within elements inside the tooltip.<\/p>\n\n\n\n

After that, we set the \u201cTop Start\u201d Placement<\/strong> of the hotspot and the \u201dFade\u201d Animation.<\/strong><\/p>\n\n\n\n

Then, we set the Animation Delay<\/strong> \u2014 the value that defines the time between the activation of the trigger and the appearance of the tooltip; Appearance<\/strong> Duration<\/strong> \u2013 a value that determines how fast the tooltip shows up after the trigger is activated; and the Disappearance Duration<\/strong> \u2013 the value that specifies how fast the tooltip is hidden after the pointer leaves the hotspot.<\/p>\n\n\n\n

In the next step, we set the \u201cFocus\u201d Trigger<\/strong>, which means the hotspot will appear only after the user focuses on it, and enable the\u00a0\u201cUse Arrow\u201d\u00a0<\/strong>toggle. When this toggle is turned on, the tooltip displays a small<\/span> arrow pointing to the hotspot.<\/p>\n\n\n\n

\"tooltip<\/a><\/div>\n<\/div><\/div>\n\n\n\n

Style the Hotspots and Tooltips<\/strong><\/h2>\n\n\n\n
\n

Go to the Style <\/strong>tab and adjust the design of hotspots and tooltips to suit your preferences and needs.<\/p>\n\n\n\n

First, we unroll the Hotspot<\/strong> settings and design the hotspot. First, we set the Icon Size, Icon Color<\/strong>, Padding<\/strong>, and Border Radius<\/strong>.<\/p>\n\n\n\n

\"styling<\/a><\/div>\n\n\n\n

Next, we unroll the Tooltip<\/strong> tab and set the Arrow Color<\/strong>, background colors, Padding<\/strong>, and Border Radius<\/strong>.<\/p>\n\n\n\n

\"styling<\/a><\/div>\n\n\n\n

Finally, press the \u201cPublish<\/strong>\u201d button to save the page.<\/p>\n<\/div><\/div>\n\n\n\n

That\u2019s it. Now you know how to add hotspots to any image using the Hotspot<\/strong> widget by the JetTricks<\/em> plugin for WordPress and configure its settings to add explanatory markers to website images.
<\/p>\n","protected":false},"excerpt":{"rendered":"

From this tutorial, you will learn how to add hotspots to any image using the JetTricks plugin functionality.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[559],"yoast_head":"\nHow to Add HotSpots to an Image \u4e00 JetTricks | Crocoblock<\/title>\n<meta name=\"description\" content=\"Learn how to add hotspots to any image using the Hotspot widget by the JetTricks plugin for WordPress and configure its settings to add explanatory markers to website images.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-hotspots-to-image\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add HotSpots to an Image \u4e00 JetTricks | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Learn how to add hotspots to any image using the Hotspot widget by the JetTricks plugin for WordPress and configure its settings to add explanatory markers to website images.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-hotspots-to-image\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-13T08:49:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/adding-the-hotspot-widget-1024x640.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-hotspots-to-image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-hotspots-to-image\/\",\"name\":\"How to Add HotSpots to an Image \u4e00 JetTricks | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2019-06-12T08:06:10+00:00\",\"dateModified\":\"2025-11-13T08:49:09+00:00\",\"description\":\"Learn how to add hotspots to any image using the Hotspot widget by the JetTricks plugin for WordPress and configure its settings to add explanatory markers to website images.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-hotspots-to-image\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-hotspots-to-image\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-hotspots-to-image\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Add Hotspots to the Image\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add HotSpots to an Image \u4e00 JetTricks | Crocoblock","description":"Learn how to add hotspots to any image using the Hotspot widget by the JetTricks plugin for WordPress and configure its settings to add explanatory markers to website images.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-hotspots-to-image\/","og_locale":"en_US","og_type":"article","og_title":"How to Add HotSpots to an Image \u4e00 JetTricks | Crocoblock","og_description":"Learn how to add hotspots to any image using the Hotspot widget by the JetTricks plugin for WordPress and configure its settings to add explanatory markers to website images.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-hotspots-to-image\/","og_site_name":"Help Center","article_modified_time":"2025-11-13T08:49:09+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/adding-the-hotspot-widget-1024x640.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-hotspots-to-image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-hotspots-to-image\/","name":"How to Add HotSpots to an Image \u4e00 JetTricks | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2019-06-12T08:06:10+00:00","dateModified":"2025-11-13T08:49:09+00:00","description":"Learn how to add hotspots to any image using the Hotspot widget by the JetTricks plugin for WordPress and configure its settings to add explanatory markers to website images.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-hotspots-to-image\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-hotspots-to-image\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-hotspots-to-image\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Add Hotspots to the Image"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/10163"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=10163"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=10163"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=10163"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}