# Tooltip Extension Settings Some details do not deserve a whole paragraph on the page. A short note that appears on hover does the job, like extra context on a feature card or a label on an icon-only button. Elementor has no built-in way to do that, so the **Tooltip** extension in [Master Addons for Elementor](https://master-addons.com/widgets-and-extensions/) adds one to every element’s Advanced tab. You write the tooltip text, pick where it appears and how it animates, then style it like any other part of your design. No shortcode and no CSS. ## What the Tooltip extension does Once enabled, every Elementor element gets a **Tooltip** section under the **Advanced** tab. Turn it on for an element, type the text, and visitors see a small bubble when they hover over that element on the live page. Each element carries its own tooltip, so three cards in a row can each explain themselves with different text. The extension splits into two sub-tabs: **Settings** for behavior (text, placement, animation, trigger, timing) and **Style** for looks (colors, width, padding, typography). ## Before you start - **WordPress** with **Elementor** installed and active. - **Master Addons for Elementor** installed and active. New to the plugin? Follow the [installation guide](https://master-addons.com/docs/getting-started/installing-plugin/) first. - Tooltips is a free extension, so no Pro license is required. ## How to enable the Tooltip extension From your WordPress dashboard, go to **Master Addons** and open the **Extensions** tab. Tooltips sits in the **Dynamic Widgets** group with a Popular badge, next to [Dynamic Tags](https://master-addons.com/docs/extensions/dynamic-tags/) and Wrapper Link. Click its toggle so it turns purple, then hit **Save Changes** at the top and wait for the green “Settings saved successfully” notice. ![Tooltips extension toggle enabled in the Dynamic Widgets section of the Master Addons Extensions tab](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/07/02052116/tooltip-01-enable-tooltips-extension.webp) ## Add a tooltip to an element Open your page with Elementor and select the element. In the video example it is an Info Box card in a three-column feature row. Go to the **Advanced** tab, open the **Tooltip** section with the purple MA badge, and flip the **Tooltip** switch to Yes. The Settings sub-tab opens first. ![Tooltip settings in the Elementor Advanced tab showing Content, Placement, Animation, Trigger, Duration, Delay, Offset, and Arrow options](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/07/02052122/tooltip-02-tooltip-settings.webp) ### Settings explained - **Content:** the tooltip text. Type it in, or use the Write with AI link if you want a starting point. - **Placement:** which side of the element the bubble prefers: top (the default), bottom, left, or right. - **Follow Cursor:** makes the tooltip trail the mouse instead of sitting still. - **Animation:** how the bubble enters. Seven choices: None, Fade, Shift-Away, Shift-Toward, Scale, Perspective, and Fill Effect. - **Trigger:** what opens the tooltip, hover by default. - **Duration and Delay out:** the animation speed in milliseconds and how long the bubble lingers before closing. - **X and Y Offset:** nudge the bubble away from its default spot. - **Arrow and Arrow Type:** add the little pointer connecting bubble to element, sharp or round. ![Tooltip animation dropdown in Elementor with None, Fade, Shift-Away, Shift-Toward, Scale, Perspective, and Fill Effect options](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/07/02052129/tooltip-03-tooltip-animations.webp) ## Style the tooltip Switch to the **Style** sub-tab to make the bubble match your design instead of looking like a browser default. ![Tooltip Style tab in Elementor with Max Width, Text Color, Background Color, Arrow Color, Padding, Border, and Typography controls](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/07/02052134/tooltip-04-tooltip-style-tab.webp) - **Max Width:** caps how wide the bubble grows, 200px in the demo, so long text wraps instead of stretching across the screen. - **Text, Background, and Arrow Color:** full color control, including the pointer. - **Padding, Border Type, and Border Radius:** the shape of the bubble. - **Text Alignment, Box Shadow, and Typography:** finish the look with your own font and depth. ## The result on the page Save and view the page. Hover over the card and the tooltip fades in with the text you wrote, using the animation, colors, and width you set. Move the cursor away and it closes after the delay. ![Tooltip visible on hover over an Info Box card on the front end showing extra descriptive text in a bubble](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/07/02052139/tooltip-05-tooltip-result.webp) Repeat for the other elements on the page. In the demo each of the three feature cards gets its own tooltip text, written once in the panel and served on every hover. ## Where tooltips earn their keep - **Feature cards.** A sentence of extra detail without lengthening the card. - **Pricing tables.** Explain what “priority support” actually covers, right where people wonder. - **Buttons and icons.** Label icon-only controls so nobody guesses. - **Team members.** A fun fact or role note on hover over each photo. - **Technical terms.** Short definitions on jargon, cheaper than a glossary page. ## Video Tutorial Prefer to see it live? This video walks through enabling the extension, writing the tooltip, and styling the bubble. ## Frequently Asked Questions How do I add a tooltip in Elementor?Enable the Tooltips extension in the Master Addons Extensions tab, then select any element in the Elementor editor, open the Advanced tab, and turn on the Tooltip switch. Type your text in the Content box, pick a placement and animation, and the tooltip shows on hover. Can I add a tooltip to any Elementor widget?Yes. The Tooltip section appears on the Advanced tab of every element: widgets, columns, containers, and sections. Each element keeps its own tooltip text and settings, so different cards on the same page can say different things. Can I style the tooltip to match my site?Yes. The Style sub-tab controls max width, text color, background color, arrow color, padding, border, border radius, text alignment, box shadow, and typography. The bubble can match your brand instead of looking like a browser default. What animations does the tooltip support?Seven options: None, Fade, Shift-Away, Shift-Toward, Scale, Perspective, and Fill Effect. You also control the animation duration in milliseconds and the delay before the tooltip closes after the cursor leaves. Is the Tooltip extension free?Yes. Tooltips ships with the free version of Master Addons for Elementor, in the Dynamic Widgets group of the Extensions tab. The [pricing page](https://master-addons.com/pricing/) shows what the Pro plans add beyond the free extensions. ## Wrapping up The Tooltip extension for Elementor puts a small, styleable hover note on anything you build: flip the switch on the Advanced tab, write the text, pick placement and animation, and style the bubble once. It reads like part of your design, not a browser leftover. For more Advanced-tab upgrades, browse the [Master Addons widgets and extensions](https://master-addons.com/widgets-and-extensions/), or see the [Glassmorphism extension](https://master-addons.com/docs/extensions/elementor-glassmorphism-effects/) for another one-toggle effect. --- Source: https://master-addons.com/docs/extensions/tooltip-extension-for-elementor/