{"id":19346,"date":"2020-07-02T15:05:56","date_gmt":"2020-07-02T15:05:56","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=19346"},"modified":"2025-11-17T08:05:39","modified_gmt":"2025-11-17T08:05:39","slug":"how-to-add-a-tooltip-to-the-widget","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-a-tooltip-to-the-widget\/","title":{"rendered":"How to Add a Tooltip to the Widget"},"content":{"rendered":"\n

A tooltip<\/a> is a small window that displays text to explain the part of the website the user is currently viewing. Using the JetTricks <\/em>plugin, you can attach tooltips not only to hotspots but also to any widget on the page. Let\u2019s take a look at how it can be done.<\/p>\n\n\n\n

Enable the Tooltips Extension<\/strong><\/h2>\n\n\n\n
\n

Go to WordPress Dashboard > JetPlugins > JetTricks > Widgets & Extensions<\/em><\/strong> and make sure that the Tooltip Widget Extension<\/strong> toggle is turned on.<\/p>\n\n\n\n

If some changes are made, they will be saved automatically.<\/p>\n\n\n\n

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

Add and Customize the Tooltip<\/strong><\/h2>\n\n\n\n
\n

Proceed to the page editor you would like to customize. For example, we go to WordPress Dashboard > Pages > Add New <\/em><\/strong>and hit \u201cEdit with Elementor<\/strong>.\u201d <\/p>\n\n\n\n

Add and click on the widget that you\u2019d like to add the tooltip to. In our case, we work with Elementor\u2019s Image <\/strong>widget. Go to Advanced > JetTricks<\/em><\/strong> and enable the Use Tooltip? <\/strong>toggle. <\/p>\n\n\n\n

This menu has two tabs, Settings <\/strong>and Style<\/strong>. First, let\u2019s take a look at the Settings<\/strong>.<\/p>\n\n\n\n

At first, you will need to select the tooltip\u2019s Content Type<\/strong>: either \u201cEditor\u201d or \u201cTemplate.\u201d By default, the \u201cEditor\u201d Content Type <\/strong>is set. It includes the following settings:<\/p>\n\n\n\n

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