Attribute Tooltip and Image - Extension for Magento 2
- Created On: 20th April, 2016
- Last Updated On: 7th January, 2019
- By: Solwin Team
- Email: email@example.com
Note: Please take a backup of your all Magento files and database before installing or updating any extension.
Download the extension file:
- Download the Attribute Tooltip And Image extension .ZIP file from solwininfotech.com using your Solwin Infotech website account.
- Extract the .ZIP file which contains another .ZIP files.
- If you have purchased the extension for the Community Edition, then you will see the extension .ZIP file for Magento 2.0.x, Magento 2.1.x, Magento 2.2.x and Magento 2.3.x version.
If you have purchased the extension for the Enterprise Edition, then you will see the extension .ZIP file for Magento 2.1.x and Magento 2.2.x version.
For Magento 2 Community Edition,
- If you are using Magento 2.0.x then you need to extract solwin-attributetooltip-m2-2.0.x.zip file.
If you are using Magento 2.1.x then you need to extract solwin-attributetooltip-m2-2.1.x.zip file.
If you are using Magento 2.2.x then you need to extract solwin-attributetooltip-m2-2.2.x.zip file.
If you are using Magento 2.3.x then you need to extract solwin-attributetooltip-m2-2.3.x.zip file.
For Magento 2 Enterprise Edition,
- If you are using Magento 2.1.x then you need to extract solwin-attributetooltip-m2-EE-2.1.x.zip file.
If you are using Magento 2.2.x then you need to extract solwin-attributetooltip-m2-EE-2.2.x.zip file.
Following 2 to 6 steps are the same for Community and Enterprise edition.
- Copy the app folder and paste it into your magento ROOT directory.
- Run upgrade command as specified : php bin/magento setup:upgrade
- Run deploy command as specified : php bin/magento setup:static-content:deploy -f
- Clear the cache either from the admin panel or command line php bin/magento cache:clean
- Now, you can see the Solwin menu in admin panel. Please go to Solwin -> Attribute Tooltip And Image -> Configuration and select Enable to Yes.
- Change/Set all other options as per your requirements and save settings.
NOTE : Make sure the installation is done from under the FTP administrator account. Otherwise make sure to set 775 permissions to the store root directory after the extension is deployed.
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 extension for Magento 2 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
- Extension Provide so many theme for the tooltip
- The store owner can add the icon html for the tooltip
- The store owner can set the width, height and color of the tooltip
- 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 the products 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 View Page - Configurable Product
This example shows attribute tooltip (top position) on the product view page.
3. 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 Stores > 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 Configuration tab, this extension allows store owner to enable or disable the module in your store and provide more configuration options.
There are so many configuration options in Configuration tab. Lets discuss all in more details.
- Enable Attribute Tooltip: Yes | No
- Tooltip Icon: Add icon for tooltip
- Tooltip Width: Enter tooltip width
- Tooltip Hight: Enter tooltip hight
- Select Tooltip Position: Top | Right | Bottom | Left | Top Left | Top Right | Bottom Left | Bottom Right- This adjusts as per the content & space
- Select A Theme For Tooltip Layout: Punk | Light | Noir | Default | Shadow
- Tooltip Theme Background: Select background color for tooltip theme background
- Tooltip Text Color: Select Color for tooltip text color
- Tooltip Border: Enter tooltip border
- Show Content As HTML: Yes | No
- Include Animation Effect: Yes | No
- Initial Delay: Set speed for tooltip initial delay
- Select Tooltip Effect: On Click | On Hover
- Display Tooltip Arrow?: Yes | No
- Tooltip Arrow Color: Select tooltip arrow color