{"id":51949,"date":"2026-06-04T06:05:31","date_gmt":"2026-06-04T06:05:31","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=tips-and-tricks&p=51949"},"modified":"2026-06-04T08:41:48","modified_gmt":"2026-06-04T08:41:48","slug":"how-to-add-custom-tooltips-within-jetelements-table-tabs-and-accordion-widgets","status":"publish","type":"tips-and-tricks","link":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/how-to-add-custom-tooltips-within-jetelements-table-tabs-and-accordion-widgets\/","title":{"rendered":"Adding Custom Tooltips Within JetElement\u2019s Table, Tabs, and Accordion Widgets"},"content":{"rendered":"\n

Use HTML Attribute (for Desktops Only)<\/strong><\/h2>\n\n\n\n
\n

Using an HTML attribute is the simplest way to add WordPress tooltips; however, in this case, the tooltip will be visible on desktops on hover, but not on mobiles.<\/p>\n\n\n\n

In this case, we add the Tabs<\/strong><\/a> widget to the page, unroll the Items<\/strong> settings, and insert the following HTML directly into the Label<\/strong> field.<\/p>\n\n\n\n

\"\"<\/a><\/div>\n\n\n\n
<i title=\"Tooltip text\" class=\"fas fa-info-circle\"><\/i><\/em><\/code><\/pre>\n\n\n\n
where the \u201cTooltip text” <\/em>is the text to be displayed in the corresponding tab.<\/p>\n\n\n\n
In this case, the text in the Label<\/strong> field looks as follows:<\/p>\n\n\n\n
<i title=\"Just read it!\" class=\"fas fa-info-circle\"><\/i><\/em><\/code><\/pre>\n\n\n\n
\"the<\/a><\/div>\n<\/div><\/div>\n\n\n\n
Add HTML (for Desktops and Mobiles) <\/strong><\/h2>\n\n\n\n
\n
The cases described herein display the needed tooltip texts on mobiles and on desktops while hovering or clicking.<\/p>\n\n\n\n
<\/svg><\/div>
Things to know<\/div>
For better UX, it is recommended to add an info icon or short hint to indicate the presence of a tooltip. On desktop, it appears on hover, but on mobiles, users need to tap, so there should be a clear visual cue that the element is interactive.<\/p><\/div><\/div>\n\n\n\n
Add inline HTML to a widget title<\/strong><\/h3>\n\n\n\n
The following HTML element can be added to the Title<\/strong> element of the Tabs<\/strong> widget or the Classic Accordion<\/strong><\/a> widget.<\/p>\n\n\n\n
\"the<\/a><\/div>\n\n\n\n
Tab#1: &nbsp; <span class=\"tooltip\" data-tip=\"Your tooltip text here\">   <i class=\"fas fa-info-circle\"><\/i> <\/span><\/em><\/code><\/pre>\n\n\n\n
where:<\/p>\n\n\n\n