Are you looking for a way to add a tooltip to your Elementor website? If that’s the case, you’ve landed on the right page.
A tooltip is also known as a ScreenTip or InfoTip that shows a snippet of text that appears on hovering over any image or specific text. These tooltips are everywhere on the internet or on your desktop as alt text, labels, or title text.
Whenever you open the internet, you might see any image, icon, or heading; if you hover your mouse pointer on these fields, you’ll see a text label that is a tooltip.
Likewise, using the tooltip feature, you can do the same on your website.
In this article, we’ll guide you through adding a tooltip and customizing its appearance using Elementor and PowerPack Addons.
So without further ado, let’s go ahead.
What is a Tooltip?
A tooltip is basically a tiny UI element that a user comes across while using internet browsers, apps, desktop screens, etc.
Let us try to understand the tooltip by its name itself.
See, as the name itself suggests, it’s a tool that gives tips to the users about an element or field whenever there is a trigger. This trigger can be either hover or click, as structured while coding them.
These tooltips are small text boxes containing a brief description or a title indicating that particular element, field, or tool. For instance, refer to your desktop screen and look at the icons on the toolbar or windows start menu.
As you can see, the app on the ‘windows start menu’ displays a tiny text box indicating info about that application. Now, this is what a tooltip looks like that you can find anywhere on your system or a website.
So if you want these tooltips to display all over your website, you need to add them.
How Tooltips Improve User Experience on your Websites
Let’s see how these tooltips can help you improve the user experience on your website.
Tooltips can be added to such areas on your website like:
- Clickable elements such as images, icons, etc.
- Titles hover texts or clickable links.
- Image hotspot.
- E-commerce products (If you run a WooCommerce website.)
Okay, just think about it, if you use these tooltips in all these areas of your website, how easy and helpful it will be for all those users who tour your website.
Yes, consumers will find it convenient, and this is because these tooltips help users by offering indications of relevant texts wherever placed on your website, and this will improve their user experience.
How to Add Tooltips in Elementor using PowerPack?
With the help of a tooltip, you can showcase an important message via text to your users for a better user experience.
In order to add a tooltip to your website, you need to install and activate Elementor and PowerPack Addons.
PowerPack Addons for Elementor has more than 80 handy & creative widgets, over 300 pre-designed templates, and useful extensions to enhance your website’s overall look and feel. One of those extensions is a Tooltip you can use to display tooltip texts on your website.
So let’s see how you can add a tooltip to your website using Elementor and PowerPack.
Enable the Tooltip Extension
To add a tooltip to your website, first enable the tooltip extension.
Next, go to your WordPress Dashboard, navigate to the Elementor, and click PowerPack.
Next, navigate to the Extensions section and enable the Tooltips feature.
Once done, hit the Save Changes button.
Enable the Tooltip Feature in Elementor
To add a Tooltip to any specific widget/section on your Elementor website, open your page in the Elementor editor. Select the element where you want to display the tooltip, then go to the Advanced Tab > PowerPack; now enable the ‘Tooltip’ feature.
Finally, the tooltip feature is successfully enabled to be displayed on your website page.
Customize the Tooltip Feature
Now that you have enabled the tooltip feature let’s look at its features that you can customize to display an attractive tooltip text.
Once you enable the tooltip feature, all the customization options will appear that you can use to enhance its overall appearance.
Let’s see what all tooltip settings you’ll get with this feature:
- Tooltip Content: Add the content that you want to display on the tooltip.
- Target: Using this option, you can select the target as either a current element or a custom selector.
- Trigger: Select the trigger you want from the available options, such as hover or click.
- Tooltip Position: Choose the tooltip position as top, bottom, left, or right.
- Show Arrow: Select an option on whether to show an arrow or not.
- Animation: Using this feature, you can apply animation to the tooltip from available options such as fade, fall, grow, slide, or swing.
- Distance: This option can adjust the distance between the hotspot and the tooltip.
- Z-Index: With this option, you can adjust the Z-index value for the tooltip.
Now that you’ve customized all the tooltip settings let’s move to the next step.
Let’s see all the styling options available for the tooltip feature:
- Background Color: Customize the background color of the tooltip using this option.
- Text Color: This feature can be used to customize the tooltip text color.
- Typography: Tooltip typography text can be customized using this option.
- Box Shadow: You can enable the box shadow feature with this option to enhance its look.
- Border Type: If you want to add a border to the tooltip, you can use this option. Choose a border type from available options such as solid, dotted, dashed, doubled, and groove.
- Border Radius: If you’ve applied a border to the tooltip, then you can adjust its radius using this option.
- Padding: You can adjust the padding for the tooltip; this will allow spacing between the tooltip text and the border.
- Width: You can also adjust the tooltip width with this option.
After customizing all these features, the tooltip we’ve just created will look like this.
So as we’ve discussed, the entire process to add a tooltip in an Elementor website using PowerPack Addons. However, this can also be done via coding; if you’re a professional coder.
If you’re designing your Elementor page and looking for ways to add custom fonts, the How To Add Custom Fonts To Elementor Websites article will guide you.
If you’ve faced any issues, please feel free to drop your queries in the comment section.