--- title: "How to Add a Tooltip to a WordPress Icon List Item?" url: https://nexterwp.com/docs/add-a-tooltip-to-a-wordpress-icon-list-item/ date: 2024-12-10 modified: 2026-09-17 lang: en author: "Aditya Sharma" description: "Not every detail belongs in the list itself. Some of it can wait for a hover. Tooltip attaches a small popup of text to a single row, shown when a..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-a-Tooltip-to-a-WordPress-Icon-List-Item_-1024x519.jpg word_count: 435 --- # How to Add a Tooltip to a WordPress Icon List Item? ## Key Takeaways - Stylish List bloquea Tooltip por fila: cada fila necesita su propio interruptor y su propio Tooltip Text, mientras que Position, Theme y Trigger se aplican a todo el bloque. - Tooltip y Hint son ajustes distintos en Nexter Blocks, así que una fila puede tener un Hint fijado, un Tooltip al pasar el cursor, ambos o ninguno. - Interactive en Style > Tooltip mantiene abierto el popup cuando el puntero entra en él, y el texto del tooltip admite HTML básico porque usa la misma biblioteca que los tooltips accesibles del navegador. Not every detail belongs in the list itself. Some of it can wait for a hover. Tooltip attaches a small popup of text to a single row, shown when a visitor points at it — a separate setting from Hint, and not tied to it. *For every Dynamic Device setting in one place, see the [Icon List block guide](https://nexterwp.com/docs/add-an-icon-list-in-wordpress/).* [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-stylish-list/) ## Before You Start - **Edition:** Free — the Stylish List block works in Nexter Blocks (free) and Nexter Blocks Pro.- **Block to enable:** Stylish List, switched on under **Nexter > Blocks** in your WordPress dashboard. ## Steps - Add the **Stylish List** block and add a row for each item, with its own text and icon. ![The Layout Type options](https://nexterwp.com/wp-content/uploads/2026/09/sl-layouttype.webp) - Open the row and switch on **Tooltip**. ![The Tooltip toggle](https://nexterwp.com/wp-content/uploads/2026/09/sl-tooltip.webp) - Type the popup's text into **Tooltip Text**. - Set Position, Theme and Trigger under Style > Tooltip for how it behaves across the whole block. > ***Tooltip and Hint are two different settings.** Switching one on does not affect the other — a row can carry a pinned Hint badge, a hover Tooltip, both, or neither.* ## How It Behaves - **Tooltip needs its own per-row toggle**, separate from Hint — confirmed in the block's own renderer, which checks a different setting for each.- **The shared Tooltip settings under Style apply to every row's tooltip at once** — Position, Theme, Trigger and animation are block-wide, only the text itself is per row.- The tooltip is a genuine popup (built on the same library as the browser's own accessible tooltips), not just a title attribute — it supports basic HTML in the text.- Interactive, under Style > Tooltip, lets a visitor move their mouse into the tooltip itself without it closing — useful if the tooltip holds a link. ## Limitations - Tooltip Text is per row, but Position, Theme and Trigger apply to every tooltip in the block at once.- A row with Tooltip on but no Tooltip Text shows nothing on hover.- Tooltips only appear on hover (or tap on touch devices, depending on Trigger) — the content is not read by search engines the way visible text is. ## Troubleshooting ### Hovering the item does nothing Check **Tooltip** is switched on for that row and **Tooltip Text** is filled in — both are required. ### The tooltip closes before I can read it Switch on **Interactive** under Style > Tooltip so the tooltip stays open while the pointer is over it. ### Every tooltip in my list looks the same even though I wanted one different Position, Theme and Trigger are shared across the whole block — only the text itself can differ row by row. ## Related Docs - [Icon List block guide](https://nexterwp.com/docs/add-an-icon-list-in-wordpress/)- [Pin Hint labels](https://nexterwp.com/docs/add-label-tab-to-wordpress-icon-list/)- [Hover background](https://nexterwp.com/docs/change-wordpress-list-item-background-on-hover/)- [Read More button](https://nexterwp.com/docs/add-read-more-button-to-the-wordpress-icon-list/) ## Frequently Asked Questions **Q: Why does hovering an icon list item do nothing when I try to add a tooltip?** A: Hover only works when two things are set on that row: Tooltip must be switched on, and Tooltip Text must contain text. Nexter Blocks treats the tooltip as a per-row setting, so a blank text field gives you nothing on hover even if the block-level tooltip styling is configured. That makes this a common setup miss in Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, Nexter Suite, POSIMYTH Nexter. **Q: How do I keep a WordPress tooltip open long enough to read it?** A: Interactive under Style > Tooltip is the setting that matters here. When it is enabled, the pointer can move into the tooltip itself without closing it, which is useful if the popup contains more than a short line of text or includes a link. Without Interactive, the tooltip behaves like a quick hover popup and can disappear before someone finishes reading it. **Q: Can each icon list item have its own tooltip text in WordPress?** A: Tooltip Text is per row, so each item can carry different copy. The catch is that Position, Theme, Trigger, and animation are shared across the whole block at once. That means you can vary the message row by row in the Stylish List block, but you cannot give each row its own tooltip behavior from those shared style controls. **Q: What is the difference between a tooltip and a Hint badge in an icon list?** A: Tooltip and Hint are separate settings in Nexter Blocks. A row can have a pinned Hint badge, a hover Tooltip, both, or neither, and switching one on does not affect the other. That separation matters because Hint is visible as a badge while Tooltip appears on hover or tap depending on Trigger. **Q: Does the WordPress icon list tooltip work on touch devices?** A: Tooltips appear on hover or tap on touch devices depending on Trigger. That makes Trigger important if your audience uses phones or tablets, because the popup behavior is not limited to desktop mouse hover. The content still lives in Tooltip Text per row, while Position and Theme stay block-wide. **Q: What should I use if I want one icon list item to look different from the others?** A: Only the text can differ row by row for tooltips. Position, Theme, and Trigger are shared across the whole block, so they will make every tooltip look and behave the same. If you need one item to stand out visually or behaviorally, that limitation means you have to work within per-row text differences rather than expecting separate styling for each row.