Image Hotspot with Tooltip for Visual Composer Website Builder — is a powerful addon for Visual Composer and WPBakery Page Builder that breathes life into your website's visuals. It provides an intuitive way to place markers or 'hotspots' on any image. When a user hovers over or clicks on these hotspots, a customizable tooltip appears, revealing text, images, or even videos. This tool is perfect for creating interactive product showcases, detailed infographics, virtual tours, or annotated diagrams, making complex information easy to digest and explore. This plugin is fully integrated with the Visual Composer workflow, meaning you can add and customize hotspots without leaving the familiar page builder interface. With a wide range of styling options, you can tailor the look and feel of your hotspots and tooltips to perfectly match your brand's aesthetic. The responsive design ensures that your interactive images look and function flawlessly on all devices, from desktops to smartphones, providing a consistent and engaging user experience for every visitor.
Why This Is Important
Are your visitors ignoring key information on your images? Standard images are passive and often fail to capture attention, leading to high bounce rates. According to a study by NN Group, users often ignore purely decorative images. Interactive elements, however, can increase user engagement by up to 70%. By failing to make your visuals interactive, you are missing a massive opportunity to guide user attention, explain complex features, and drive conversions.
This plugin solves that problem by turning passive viewers into active participants. You can create detailed product tours that highlight specific features, explain complex diagrams with step-by-step information, or create engaging visual guides. This not only improves user experience but can directly impact sales by making product information more accessible and compelling. Stop letting your visitors guess and start guiding them with interactive hotspots.
Features
- Easy Hotspot Placement: Add hotspots to any image with a simple drag-and-drop interface within Visual Composer.
- Rich Content Tooltips: Tooltips can contain not just text, but also images, videos, and custom HTML.
- Customizable Icons and Pointers: Choose from a library of icons or upload your own to use as hotspot markers.
- Advanced Styling Options: Control the color, size, opacity, and animations of both hotspots and tooltips.
- Responsive and Mobile-Friendly: Hotspots and tooltips are fully responsive and work seamlessly on all screen sizes.
- Two Trigger Actions: Set tooltips to appear on user click or hover, giving you control over the interaction.
- Multiple Tooltip Positions: Easily position tooltips to the top, bottom, left, or right of the hotspot.
- Light & Dark Color Schemes: Quickly apply pre-designed light or dark themes to your tooltips for a professional look.
- Animation Effects: Add subtle animations to hotspots to draw user attention, such as pulsing or bouncing.
- WPBakery Page Builder Ready: Fully compatible with the latest versions of WPBakery Page Builder for a smooth workflow.
Benefits of Using Image Hotspot
| Feature | Benefit for Standard Website | Benefit for E-commerce |
|---|---|---|
| Interactive Hotspots | Increases user time on page, improves engagement with content like infographics and maps. | Allows customers to explore product features in detail, leading to higher conversion rates. |
| Rich Media in Tooltips | Enables embedding of tutorial videos or detailed text without cluttering the page. | Showcases product variations, demo videos, or close-up images directly on the product photo. |
| Custom Styling | Maintains brand consistency across all visual elements for a professional look. | Creates a unique and memorable shopping experience that matches the brand's aesthetic. |
| Responsive Design | Ensures a great user experience for mobile visitors, which often make up over 50% of traffic. | Prevents lost sales from mobile shoppers who can't interact with product images properly. |
How to install the plugin?
- Download the plugin archive using the button above.
- Navigate to Plugins > Add New in your WordPress dashboard.
- Click "Upload Plugin" at the top and select the downloaded ZIP file.
- Install, activate the plugin, and follow the quick setup wizard instructions.
FAQ
Is this plugin compatible with the latest version of WordPress and WPBakery Page Builder?
Yes, the plugin is regularly updated to ensure full compatibility with the latest versions of WordPress, the Classic Editor, Gutenberg, and WPBakery Page Builder (formerly Visual Composer). We recommend keeping both WordPress and the page builder updated for optimal performance and security.
Can I use custom icons or images for the hotspot markers?
Absolutely. While the plugin comes with a built-in library of icons, you have the flexibility to upload your own custom images or icons to be used as hotspot markers. This allows you to perfectly match the markers to your brand's style guide or the image's aesthetic.
How do the hotspots and tooltips perform on mobile devices?
The plugin is designed with a mobile-first approach. Hotspots and their corresponding tooltips are fully responsive. They automatically adjust their size and positioning to provide a seamless and user-friendly experience on smaller screens like tablets and smartphones. For touch devices, the trigger is typically set to 'click' to avoid accidental hovers.
Can I add a link or a call-to-action button inside a tooltip?
Yes, you can. The tooltip content editor supports rich text and HTML, which means you can easily insert hyperlinks, buttons, or any other HTML element. This is perfect for directing users to a product page, a contact form, or another relevant resource directly from the image.
