--- title: "How to Add a Tooltip to an Elementor Pricing Table?" url: https://theplusaddons.com/docs/add-a-tooltip-to-an-elementor-pricing-table/ date: 2024-06-20 modified: 2026-09-15 lang: en author: "Aditya Sharma" description: "Some feature rows need a sentence of explanation — what unlimited really means, or what happens past the included quota. Putting that sentence in the row makes the card long;..." image: https://theplusaddons.com/wp-content/uploads/2024/06/How-to-Add-Animated-Headings-In-Elementor-6-1024x536.jpg word_count: 819 --- # How to Add a Tooltip to an Elementor Pricing Table? ## - The Pricing Table widget from The Plus Addons for Elementor attaches a tooltip to any single row of the feature list, keeping the card short when a row needs extra explanation. - The Plus Addons for Elementor Pro provides tooltip support for the feature list, while the Pricing Table widget itself remains in the free plugin. - Tooltip On offers two modes, Box and Icon, and the widget uses a Stylish List because tooltips live on repeater rows, not on the WYSIWYG description style. - Style > Tooltip Options controls Position, Theme, Trigger, Animation, Arrows, Tooltips Interactive, Tooltip Icon and Size for the whole widget, and Font Awesome 5 icons are the safe choice for Tooltip Icon. Some feature rows need a sentence of explanation — what *unlimited* really means, or what happens past the included quota. Putting that sentence in the row makes the card long; putting it in a tooltip keeps the card short. The **Pricing Table** widget from The Plus Addons for Elementor can attach a tooltip to any single row of the feature list. *To check the complete feature overview documentation of The Plus Addons for Elementor Pricing Table widget, [click here](https://theplusaddons.com/docs/add-a-pricing-table-in-elementor/).* ***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.*** [LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/pricing-table/?utm_source=tpae&utm_medium=docs&utm_campaign=text) ## Before You Start - **Edition:** **Pro** for this feature — tooltips on the feature list are only in The Plus Addons for Elementor Pro. The Pricing Table widget itself is in the free plugin, so the rest of the card still works without Pro.- **Widget to enable:** Pricing Table, switched on under **The Plus Addons > Widgets**.- **One widget is one plan:** the widget renders a single pricing card. For a three-column pricing section, put three Pricing Table widgets side by side in one container.- **The list must be a Stylish List.** Tooltips live on the repeater rows, so the **WYSIWYG** description style has none. ## How to Add a Tooltip - Select the **Pricing Table** widget and open **Description**.- Set **Style** to **Stylish List**.- Open the repeater row you want to explain and switch **Tooltip Options** on. ![A feature row open in the Description repeater with the Tooltip Options switcher turned on](https://theplusaddons.com/wp-content/uploads/2026/09/pricingtable-tooltip-toggle.webp) - Choose **Tooltip On**: **Box** shows the tooltip when the whole row is hovered, **Icon** adds a small icon at the end of the row and shows the tooltip on that.- Choose **Content Type**: **Content Text** for a plain sentence, **Content WYSIWYG** for formatting, links or an image.- Write the tooltip in **Description** (or **Tooltip Content**), and set **Text Alignment** and **Text Color** if you want. ![Tooltip On dropdown set to Box, with Content Type, Description and Text Alignment below it](https://theplusaddons.com/wp-content/uploads/2026/09/pricingtable-tooltip-on.webp) ![The tooltip Description field filled in for one feature row](https://theplusaddons.com/wp-content/uploads/2026/09/pricingtable-tooltip-content.webp) ## Shared Tooltip Settings Position, theme, size and timing are set once for the whole widget under **Style > Tooltip Options**, not per row. | Setting | What it does | Default | | ------- | ------------ | ------- | | **Position** | Which side of the row the tooltip opens on — Left, Right, Top, Top Start, Top End or Bottom | Top | | **Theme** | The tooltip's colour scheme: Dark, Light or Translucent | Dark | | **Trigger** | Hover or click | Hover | | **Animation** | How it appears — Shift-Away, Shift-Toward, Fade, Scale or Perspective | Shift-Toward | | **Arrows** | The pointer shape: None, Default or Round | Default | | **Tooltips Interactive** | Lets the pointer move into the tooltip, so links inside it are clickable | On | | **Tooltip Icon** | The icon used when **Tooltip On** is **Icon** | none | | **Size** | Size of that icon — it has no default and the icon is invisible until you set one | empty | ![Style tab Tooltip Options section showing Tooltip Icon, Left Offset and the empty Size field](https://theplusaddons.com/wp-content/uploads/2026/09/pricingtable-tooltip-style.webp) Here is the finished tooltip on a live page: ![Animated demo: hovering a feature row of a pricing card opens its tooltip](https://theplusaddons.com/wp-content/uploads/2024/06/pricing-table-tooltip-options-demo.gif) ## How It Behaves - With **Tooltip On** set to **Box**, the whole feature row is the trigger — hovering anywhere on it opens the tooltip.- With **Icon**, a small icon is added after the row text and only that icon opens the tooltip.- The tooltip script is only loaded on pages where a tooltip is actually switched on, so cards without tooltips stay light.- Tooltips are set per row, so you can explain one feature and leave the rest plain.- **Content WYSIWYG** keeps links clickable because **Tooltips Interactive** is on by default. ## Limitations - Tooltips are a Pro feature. In the free plugin the **Tooltip Options** switcher is shown with a PRO badge and switching it on does nothing on the page.- **Tooltip On > Icon** needs a size before it works. **Size** under **Style > Tooltip Options** has no default, and until you set one the icon is drawn 0 pixels wide — there is nothing to hover. Set **Size** to about 16 px.- Only Font Awesome 5 icons are safe for **Tooltip Icon**. A Font Awesome 4 icon renders as empty space because no Font Awesome stylesheet is loaded.- Position, theme, trigger and size are per widget, so every tooltip in one card shares them.- Tooltips are hover-based by default, which means they are awkward on touch screens. Switch **Trigger** to click if mobile matters.- There are no tooltips on the **WYSIWYG** description style. ## Troubleshooting ### I chose Icon but there is no icon to hover Set **Size** under **Style > Tooltip Options**. With no size the icon is zero pixels wide. Pick a **Tooltip Icon** from the Font Awesome 5 library while you are there. ### Nothing happens on hover Check the tooltip is switched on in the right repeater row, and that **Description** is not empty. Then clear any page cache — the tooltip needs the widget's script. ### The Tooltip Options switcher has a PRO badge You are on the free plugin. The switcher is shown for reference, but Free does not render tooltips. ### The tooltip opens off the edge of the screen Change **Position** under **Style > Tooltip Options** — for a card at the edge of the row, Top usually behaves better than Left or Right. ### My tooltip link is not clickable Use **Content WYSIWYG** for the content and leave **Tooltips Interactive** on, so the pointer can move into the tooltip. ## Related Docs - [Pricing Table widget settings overview](https://theplusaddons.com/docs/add-a-pricing-table-in-elementor/)- [Add a show more button for the feature list](https://theplusaddons.com/docs/add-show-more-button-for-features-in-elementor-pricing-table/)- [Add a ribbon to a pricing table](https://theplusaddons.com/docs/add-a-ribbon-to-an-elementor-pricing-table/)