---
title: "How to Add Tooltip Text to Elementor Button?"
url: https://theplusaddons.com/docs/tooltip-text-in-button-elementor/
date: 2024-01-09
modified: 2026-09-10
lang: en
author: "Aditya Sharma"
description: "Are you looking to add tooltip text to an Elementor button? A tooltip is the small panel that appears when someone hovers, and it is the cleanest way to explain..."
image: https://theplusaddons.com/wp-content/uploads/2024/01/How-to-Add-Tooltip-Text-to-Elementor-Button_-1024x536.jpg
word_count: 866
---

# How to Add Tooltip Text to Elementor Button?

## 

- The Plus Addons for Elementor Button widget includes a built-in Elementor tooltip with plain text or rich content, six positions, custom colours and typography, and no custom code.
- The Pro edition places the full Tooltip section under Advanced > Tooltip, while the Free plugin only shows the Tooltip toggle under Style > Special and then displays a Pro notice.
- Tooltip Content Type offers Text Content for a short sentence or WYSIWYG Editor for formatting, links, images, video, or emoji.
- Tooltip Options include position, trigger, arrow, animation, in/out timings, and Interactive is set to On by default; the default trigger is Hover, so touch devices generally need Trigger set to Click.

Are you looking to add tooltip text to an Elementor button? A tooltip is the small panel that appears when someone hovers, and it is the cleanest way to explain what a button does without cluttering the label itself — a price caveat, a delivery promise, or what happens after the click.

The Button widget in The Plus Addons for Elementor has a full Elementor tooltip built in: plain text or rich content, six positions, your own colours and typography, and no custom code.

*To check the complete feature overview documentation of The Plus Addons for Elementor Button widget, [click here](https://theplusaddons.com/docs/button-widget-settings-overview/).*

***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/free-elementor-buttons/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Pro** — the Tooltip *toggle* appears in the Free plugin, but the tooltip content and styling controls are part of The Plus Addons for Elementor Pro.- **Widget to enable:** Button, switched on under **ThePlus Settings > Widgets**.

## Where This Setting Lives

Worth reading before you go looking, because the location depends on the edition:

| Edition | Where to find it | What you get |
| ------- | ---------------- | ------------ |
| Free | **Style > Special** | The Tooltip toggle only. Switching it on reveals a Pro notice rather than the settings. |
| Pro | **Advanced > Tooltip** | The full section, split into two inner tabs: **Content** and **Style**. |

> *The Content and Style tabs described below are the two inner tabs inside* the Advanced > Tooltip section. They are not the widget's own Content and Style tabs at the top of the panel. Everything in this guide happens in one place.

## Step 1: Add the Button widget and set it up

Drag the **Button** widget into your container. On the **Content** tab, open **Layout**, choose a **Button Style** and set the **Text** for your label.

## Step 2: Open Advanced and turn the Tooltip on

Go to the **Advanced** tab and open the **Tooltip** section. Switch **Tooltip** on, and the Content and Style inner tabs appear beneath it.

![The Advanced tab open with the Tooltip section expanded and the toggle set to Yes](https://theplusaddons.com/wp-content/uploads/2026/09/tp-button-tooltip-wide.webp)

## Step 3: Choose plain text or rich content

**Content Type** offers two options. **Text Content** is a plain textarea — right for a short sentence, and the one to use most of the time. **WYSIWYG Editor** gives you a full editor, so the tooltip can hold formatting, links, images, video or emoji.

![The Content Type dropdown highlighted inside the Tooltip section](https://theplusaddons.com/wp-content/uploads/2026/09/tp-button-content-type-wide.webp)

## Step 4: Write the tooltip text

Type what the tooltip should say into **Description**. It ships with placeholder Latin text, so replace that or your visitors will read it. Keep it to one short sentence — a tooltip that needs two is usually a sign the information belongs on the page instead.

![The Description textarea highlighted, holding the tooltip text](https://theplusaddons.com/wp-content/uploads/2026/09/tp-button-description-wide.webp)

## Step 5: Align and style it

**Text Alignment** sets how the text sits inside the tooltip — left, center (the default) or right. **Text Color** and the typography controls sit right below it.

Switch to the **Style** inner tab for the rest: **Tooltip Options** holds position, trigger, arrow, animation and the in/out timings, while **Style Options** holds the background, border, radius, padding and shadow.

![The Text Alignment control highlighted inside the Tooltip section](https://theplusaddons.com/wp-content/uploads/2026/09/tp-button-text-alignment-wide.webp)

## What It Looks Like

![An Elementor button showing a tooltip when the visitor hovers over it](https://theplusaddons.com/wp-content/uploads/2024/01/button-tooltip-demo.gif)

## Settings Reference

| Setting | Inner tab | Options | Default |
| ------- | --------- | ------- | ------- |
| Tooltip | — | On / Off | Off |
| Content Type | Content | Text Content, WYSIWYG Editor | Text Content |
| Description | Content | Plain text | Placeholder text |
| Text Alignment | Content | Left, Center, Right | Center |
| Text Color | Content | Colour | Not set |
| Position | Style > Tooltip Options | Left, Right, Top, Top Start, Top End, Bottom | Top |
| Trigger | Style > Tooltip Options | Hover, Click | Hover |
| Theme | Style > Tooltip Options | Dark, Light, Translucent | Dark |
| Arrows | Style > Tooltip Options | None, Default, Round | Default |
| Animation | Style > Tooltip Options | Shift-Away, Shift-Toward, Fade, Scale, Perspective | Shift-Toward |
| Duration In / Out | Style > Tooltip Options | Milliseconds | 250 / 200 |
| Interactive | Style > Tooltip Options | On / Off | On |
| Background, Border, Radius, Padding, Shadow | Style > Style Options | Standard controls | Not set |

## Limitations

- **One tooltip per button.** The controls are per widget, so a button cannot show two different tooltips.- **Hover is the default trigger, and phones have no hover.** On touch devices a hover tooltip generally needs a tap first. If the tooltip carries information the visitor must see, set **Trigger** to Click, or put the text on the page.- **Placeholder text ships enabled.** Turning the tooltip on without editing Description publishes Latin filler.- **It is per widget, not global.** To reuse one tooltip across many widgets, see [global tooltips in Elementor widgets](https://theplusaddons.com/docs/setup-global-tooltips-elementor-widgets/).

## Troubleshooting

### I cannot find the Tooltip settings

On **Pro** they are on the **Advanced** tab, in the **Tooltip** section — not under Style > Special. On **Free** the toggle is under Style > Special and turning it on shows a Pro notice. Older guides pointed everyone at Style > Special, which is only correct for Free.

### The tooltip shows Latin placeholder text

The **Description** field still holds its default. Open Advanced > Tooltip > Content and replace it.

### The tooltip is cut off or sits in the wrong place

Change **Position** under Tooltip Options — a top-positioned tooltip on a button near the top of the viewport has nowhere to go. Reduce the tooltip width, or use the X and Y offset fields to nudge it.

### Nothing happens on a phone

The default trigger is **Hover**, and touch devices do not hover. Set **Trigger** to Click.

## Related Docs

Did you know? You can create a [coupon code button](https://theplusaddons.com/elementor-widget/elementor-coupon-code/) to boost sales on your Elementor website.

Also read how to [set up global tooltips in Elementor widgets](https://theplusaddons.com/docs/setup-global-tooltips-elementor-widgets/).

- [Button widget: settings overview](https://theplusaddons.com/docs/button-widget-settings-overview/) — every control in the widget.- [Change button text on hover in Elementor](https://theplusaddons.com/docs/button-text-on-hover-in-elementor/) — a different way to say more on hover.- [Add a button hover animation in Elementor](https://theplusaddons.com/docs/button-hover-animation-in-elementor/)

## Frequently Asked Questions

**Q: How do I add tooltip text to an Elementor button without writing code?**
A: The Button widget in The Plus Addons for Elementor adds tooltip support directly inside Elementor, so the tooltip lives on the button itself instead of needing custom code. The key setup is in Advanced > Tooltip, where you turn it on, choose plain text or rich content, and then write the Description. That keeps the button label clean while still giving visitors extra context like a delivery promise or price caveat.

**Q: Where is the tooltip setting for an Elementor button in Pro and Free?**
A: In Pro, the full tooltip controls are under Advanced > Tooltip, split into Content and Style inner tabs. In Free, only the Tooltip toggle appears under Style > Special, and turning it on shows a Pro notice instead of the settings. That difference matters because older guides point to Style > Special, but that path only applies to Free.

**Q: What is the best content type for a button tooltip: plain text or rich content?**
A: Text Content is the safer default because it is just a plain textarea and works best for a short sentence. WYSIWYG Editor makes sense when the tooltip needs formatting or media, since it can hold links, images, video, or emoji. For most button tooltips, short plain text is easier to scan and less likely to feel like page content that should live elsewhere.

**Q: Why does my button tooltip show Latin placeholder text?**
A: The Description field still contains its default placeholder text, so the tooltip is publishing filler instead of your own copy. Open Advanced > Tooltip > Content and replace that text before saving. This is an easy miss because the tooltip can look enabled even when the actual message was never edited.

**Q: Why is my Elementor button tooltip cut off or in the wrong place?**
A: Tooltip position is usually the first thing to adjust because a top-positioned tooltip near the top of the viewport has nowhere to appear. The Plus Addons for Elementor gives you Position under Tooltip Options plus X and Y offset fields, so you can move it into view instead of letting it clip offscreen. Reducing width can also help when there is not enough space around the button.

**Q: Do button tooltips work well on phones?**
A: Hover tooltips are a poor fit for phones because touch devices do not hover. The page says Hover is the default trigger, so on mobile a hover tooltip generally needs a tap first. If visitors must see the message, switch Trigger to Click or put that information on the page instead of relying on hover.