Attribute Tooltip and Image - Extension for Magento 2

Introduction

Installation

If you purchased an extension from Magento Marketplace then click on the How to Install Magento 2 Extension to install the extension.


If you purchased an extension from Solwin Site then follow the below steps to install the extension.

Installation Process

Note: Please take a backup of your all Magento files and database before installing or updating any extension.

Download the extension file:
  1. Download the Attribute Tooltip And Image extension .ZIP file from solwininfotech.com using your Solwin Infotech website account.
  2. Extract the .ZIP file which contains another .ZIP files.
  3. If you have purchased the extension for the Community Edition, then you will see the extension .ZIP file for Magento 2.1.x, Magento 2.2.x, Magento 2.3.x, and Magento 2.4.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, Magento 2.2.x and Magento 2.3.x version.
Extension Installation

For Magento 2 Community Edition,

  1. 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, Magento 2.4.x then you need to extract solwin-attributetooltip-m2.zip file.

For Magento 2 Enterprise Edition,

  1. 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.
    If you are using Magento 2.3.x then you need to extract solwin-attributetooltip-m2-EE.zip file.

Following 2 to 6 steps are the same for Community and Enterprise edition.

  1. Copy the app folder and paste it into your magento ROOT directory.

    FTP
  2. Run upgrade command as specified : php bin/magento setup:upgrade.
  3. Run deploy command as specified : php bin/magento setup:static-content:deploy -f.
  4. Clear the cache either from the admin panel or command line php bin/magento cache:clean.
  5. Now, you can see the Solwin menu in admin panel. Please go to Solwin -> Attribute Tooltip And Image -> Configuration and select Enable to Yes.
  6. 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.

Getting Started

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.

Information

The Attribute Tooltip and Images extension for Magento 2 adds a custom tooltip to the attributes for the Magento website.

The tooltip can display as text and/or image.

The Attribute Tooltip and Images extension for Magento 2 provides an option to show an image for an individual attribute.

Once the store owner enables the “Visible on Product View Page on Front-end” option then the attributes tooltip image displays on the product detail page.

The Attribute Tooltip and Images displays on the product filtering option in the filtering blocks, in configurable product options, and the product More Information tab.

The extension provides several options from the 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

Features

The Extension provides the below features:

  • Displays on the product detail page in additional information block, for configurable product options, and in filtering block on the category page.
  • Tooltip position can change in the top, right, bottom, or left, and combinations of all these.
  • There are 5 theme layouts for the tooltip.
  • Set Minimum and Maximum width of the tooltip it can fix as per content.
  • Tooltip displays textual data and images.
  • The store owner can add the icon HTML for the tooltip.
  • “Show Content As HTML” option to display any HTML structure, which interprets the data as HTML.
  • Different animation effects like fade, grow, slide, fall, swing, etc.
  • Allows to set the speed of the animation.
  • Tooltip effect can be changed from the admin control panel, i.e., it display on click or hover.
  • Allows the store admin to set tooltip delay time.
  • Allows to choose tooltip arrow color.

Settings

In the configuration tab, the Attribute Tooltip magento 2 extension allows store owners to enable or disable the module in the store and provide more configuration options.

There are so many configuration options in Configuration tab. Lets discuss it all in more details.

Go to Solwin >> Attribute Tooltip And Image >> Configuration.

attribute tooltip settings

General

  • Enable Attribute Tooltip: Yes | No.
  • Tooltip Icon: Add icon for tooltip.
  • Tooltip Maximum Width: Enter tooltip maximum width.
  • Tooltip Minimum Width: Enter tooltip minimum width.
  • Select Tooltip Position: Top | Right | Bottom | Left | Top Left | Top Right | Bottom Left | Bottom Right (This adjusts as per the content & space).
  • Select Theme For Tooltip Layout: Punk | Light | Noir | Default | Shadow.
  • Tooltip Border: Select border color for tooltip theme.

attribute tooltip settings1

  • Tooltip Text Color: Select Color for tooltip text.
  • Tooltip Theme Background: Select Color for tooltip theme background.
  • Show Content As HTML: Yes | No.
  • Include Animation Effect: Yes | No.
  • Select Animation Style: Fade | Grow | Swing | Slide | Fall.
  • Animation Speed: Set animation speed.
  • 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.

How To Configure

In the admin control panel, the administrator can manage attribute tooltip image and description.

1. Go to STORES >> Attributes >> Product.

2. Select Particular Attribute.

3. In the Storefront Properties section, upload attribute image and set attribute tooltip content, and save attribute. View the below screenshot for more details.

attribute tooltip - product attribute page

How To Use

On the frontend, customers can view the tooltip on the product list page, product view page, and in the additional information tab.

1. On Product List Page.

The below screenshot shows the attribute tooltip (top position) in the sidebar on the product list page.

attribute tooltip - product list page


2. On Product Page – with Configurable Product.

The below screenshot shows the attribute tooltip (top position) on the product view page.

attribute tooltip - configurable product


3. On Product Page - Additional Information Tab.

The below screenshot shows the attribute tooltip (top position) on the product view pageadditional information tab.

attribute tooltip - product detail page

Support

If you have any questions or requests, please contact us at support@solwininfotech.com. We are very happy to assist you!

  1. Website: https://solwininfotech.com
  2. Blog: https://solwininfotech.com/blog
  3. Support: http://support.solwininfotech.com