Tooltips
Got a feature that needs a quick explanation? An icon that could use a hint? Add helpful context right where it’s needed with custom tooltips. This extension lets you attach a sleek, fully-styled tooltip to absolutely anything in Elementor – a button, an icon, a heading, even a whole section. Write your message, choose where it pops up, and style it to match your site perfectly. Keep your design clean and your visitors informed, without crowding your page with permanent text.
Smart Positioning & Interactive Behavior
Your tooltip should help, not get in the way. Choose its Placement -Top, Bottom, Left, or Right of the element. Make it appear on Hover or on Click. Add smooth Animation (like Scale or Fade) for a polished feel. You can even enable Follow Cursor so the tooltip moves with the user’s mouse, perfect for detailed explanations on charts or images. Set the Duration and Delay to make the interaction feel just right.
- Flexible Placement: Position the tooltip on any side of the element to avoid covering important content.
- Cursor Following: For precise, interactive explanations, turn on Follow Cursor.
- Smooth Entrances & Exits: Choose an animation and timing so the tooltip feels like a natural part of the interface.
Complete Visual Customization
Default browser tooltips are ugly. Ours are fully designed by you. Match your brand with custom Text Color and Background Color. Add Padding, Borders, and Border Radius for shape. Control the Arrow style and color for that professional touch. Even add Box Shadow and custom Typography so the tooltip feels like a seamless extension of your design, not an afterthought.
- Brand Alignment: Use your exact brand colors for the background, text, and arrow.
- Professional Polish: Add borders, shadows, and rounded corners to match your site’s aesthetic.
- Full Typography Control: Change the font family, size, and weight of the tooltip text.
Add Tooltips Anywhere
The power is in its flexibility. Attach a tooltip to any Elementor widget, container, column, or section. No element is left out. Need help writing clear, concise tooltip text? Use the built-in “Write with AI” button to generate helpful content instantly. This makes it incredibly fast to add informative layers across your entire website.
- Works on Everything: Apply tooltips to buttons, icons, images, text, headings—anything you can select in the editor.
- AI-Powered Content: Hit a creative block? Let AI suggest clear, friendly text for your tooltip.
- Dynamic Potential: Combine with other extensions to show dynamic data (like a product price) inside a tooltip.
Frequently Asked Questions For Tooltips
How do these tooltips behave on mobile touchscreens?
Since the primary Trigger is often “Hover,” which doesn’t exist on touchscreens, the tooltips smartly adapt. On mobile, a tap usually acts as the “hover” trigger to show the tooltip. Another tap elsewhere will close it. It’s important to keep tooltip text concise for smaller screens.
Are these tooltips good for SEO and accessibility?
When implemented correctly, yes. The tooltip text is part of the page’s HTML. However, for critical information, don’t rely only on a tooltip, as some screen reader users may not trigger it. Use tooltips for helpful supplementary info, not essential content. Always test with accessibility tools.
Will adding many tooltips slow down my page?
Each tooltip adds a small amount of HTML and CSS. Having dozens of complex tooltips on one page could contribute to minor performance overhead, but for typical use (5-10 tooltips per page), the impact is negligible. The benefits to user experience are worth it.
What's a good real-world use for the "Follow Cursor" feature?
Imagine an interactive map or a technical diagram in an image. You could enable Follow Cursor so that as a user moves their mouse over different parts of the image, a tooltip follows their cursor to label and explain each specific area in detail. It creates an engaging, exploratory experience.
Trending Elementor Widgets & Extensions
Build sophisticated websites in less time.
Caldera Forms
