Attribute Tooltip and Image - Magento Extension
Attribute Tooltip and Image by Solwin - Magento Extension
- Created On: 12/03/2015
- Last Updated On: 27/03/2015
- By: Solwin Team
- Email: email@example.com
A setup guide and general information to help you
This document covers the installation, set up, and use of this extension and provide answers and solutions to common problems and issues. We encourage you to read this document thoroughly if you are experiencing any difficulties.
This Magento extension will add custom tooltip to your Magento website. Basically, this tooltip will be used for the attributes. This tooltip will display not only text but the images too. All you need to do is that add the content from admin side in particular attribute. This extension will also provide one option to show image for an individual attribute. You can upload an image from admin side from particular attribute. You need to enable “Visible on Product View Page on Front-end” option to display it on the detail page. It will be also displayed in the product filtering option in the filtering blocks (if set there) and in configurable product option too.
This extension will provide several options from admin side for the tooltip like,
- Maximum & Minimum width
- Position of tooltip
- Tooltip layout
- Animation effect & speed
- Tooltip effect
- Tooltip arrow color
- The delay time for tooltip
You can find these features below:
- Easily Manageable from admin side
- Display on the product detail page in additional information block, for configurable product options and in filtering block on the category page.
- Tooltip position can be changed in the top, right, bottom or left and also combinations of these all.
- There are 4 theme layouts provided for the look of the tooltip
- Minimum and Maximum width of tooltip can be fixed as per content
- Not only textual data, but images can also be displayed
- To display any HTML structure ‘Show Content As HTML’ option is there, which will interpret the data as HTML.
- Different animation effects like fade, grow, slide, fall, swing etc, also can be provided.
- Speed of animation also can be controllable.
- Tooltip effect also can be changed, i.e., it should be displayed on click or on hover?
- Delay time can be set before tooltip display
- Arrow color of tooltip also can be changed easily
- There is also one option to display attribute image beside attributes
How To Use
In frontend, Customers can see helps about product attribute using descriptive tooltip pop-ups. These tooltips are not visible by default and only pop-up when user hovers/clicks the target Attribute Info icon with a mouse pointer. This will save space on the page, the design will remain clean and improve user accessibility.
Customers can see this tooltips on product list page, product view page and in the additional information tab. Let's see the example at various place.
1. On Product List Page - Layered Navigation - Top Position
This example shows attribute tooltip (top position) on layered navigation block on the product list page.
2. On Product List Page - Layered Navigation - Right Position
This example shows attribute tooltip (right position) on the layered navigation block on the product list page.
3. On Product View Page
This example shows attribute tooltip (top position) on the product view page.
4. On Product View Page - Additional Information Tab
This example shows attribute tooltip (top position) on the product view page additional information tab.
How To Configure
In backend, the administrator can manage attribute tooltip image and description. If you are an admin then follow below steps.
1. Go to Catalog > Attributes > Manage Attributes
2. Select Particular Attribute
3. In frontend properties section, find attribute image and attribute tooltip fields.
4. Upload attribute image and set attribute tooltip content and save attribute. See below screenshot for more details
In the Settings tab, our extension allows you to enable or disable the module in your store and provide you more configuration options to customize your product attributes with tooltip and image.
There are so many configuration options in system tab. Let's discuss all in more details.
- Enable: Yes
- Maximum Width for Tooltip: Enter maximum width
- Minimum Width for Tooltip: Enter Minimum width
- Select Tooltip Position: Top | Right | Bottom | Left - This adjusts as per the content & space
- Show Content As HTML?: Select Yes for display content as HTML
- Select Theme for Tooltip Layout: Select theme style
- Include Animation Effect?: Yes | No
- Select Animation Style: Determines how the tooltip will animates in and out
- Speed for Animation: Enter speed for tooltip animation
- Delay time to display tooltip: Enter delay time for display tooltip
- Select tooltip effect: Set how tooltips should be activated and closed
- Hide on Click?: Yes | No
- Tooltip Arrow Color: Enter specific arrow color for tooltip