Do you want to add a text tooltip in Elementor? These small interactive boxes of text that appear when hovering over an element can provide additional information or context to the user. Incorporating tooltips can enhance the user experience and make the website more engaging.
With the Global Tooltips extension from The Plus Addons for Elementor, you can add a text tooltip on an element in Elementor.
To check the complete feature overview documentation of The Plus Addons for Elementor Global Tooltips extension, click here: Global Tooltips Settings Overview
Requirement — This extension is a part of The Plus Addons for Elementor. Make sure it is installed and activated.
Add one of the listed widgets of The Plus Addons for Elementor and follow the steps.
1. Go to Advanced > Plus Tooltip.
2. Enable the Tooltip toggle to activate the tooltip feature on the widget. This must be turned on before any tooltip content or style options become visible.
If you want to display an image inside the tooltip instead of text, see the Image Tooltip in Elementor documentation.
3. From the Content Type dropdown, under the Content tab, select between Text Content and WYSIWYG Editor as the editor type for the tooltip content. Choose Text Content when the tooltip message is a short, plain sentence. Choose WYSIWYG Editor when you need formatted text, links, or styled content inside the tooltip.
4. Then, in the Description section, you have to add the tooltip content. This is the text that will appear when a visitor hovers over the widget. Keep this concise so the tooltip is quick to read.
From the Text Alignment section, you can align the content. Use this when the tooltip contains more than one line of text, because alignment affects readability inside the tooltip box.
Then, from the Typography section, you can manage the tooltip content typography. This is useful when the tooltip text needs to be a different size or weight than the default to stay legible against the tooltip background color.
You can manage the text color from the Text Color section. Use this when the default text color does not contrast well with the tooltip background, or when you want the tooltip text to match your brand palette.
From the Style tab, you can style the tooltip box itself, including background color, border, padding, and positioning.
Now, you will see a text tooltip when you hover on the widget.
For table cells that need inline hints, the Table widget from The Plus Addons for Elementor also supports tooltips on individual cells, so you can apply the same hover-text approach inside a data table.
Suggested Read: How to add a YouTube video tooltip in Elementor.
