Technical details

Daniël van der Linden edited this page Jul 1, 2018 · 9 revisions


This module extends/overrides some core classes using the di.xml or with plugins/observers.

The following list will give you some more info on how the module works.


The module adds a single column to the eav_attribute table. This table keeps track of attribute properties. The column added is tooltip with the type TEXT. This stores the tooltip content.

Extending the core

Adding the extra form field

Observer: Observer/AddTooltipToAttributeObserver: This observer is responsible for adding an extra field to the product attribute edit form. The product_attribute_form_build_main_tab event is used to get access to the form.


Extended by: Spaggel\Tooltip\Block\Product\View\Attributes

This class is used for the product details on the product view page.

  • Override getAdditionalData() to add the tooltip field to the result array.

Around line ~30 in (the module) file Block/Product/View/Attributes.php see:

 $data[$attribute->getAttributeCode()] = [
     'label' => __($attribute->getStoreLabel()),
     'value' => $value,
     'code' => $attribute->getAttributeCode(),
     'tooltip' => $attribute->getData('tooltip'), // add the tooltip content


Extended by: Spaggel\Tooltip\Model\ConfigurableAttributeData

This class provides the swatch attribute data for configurable products.

  • Override getAttributesData() to add the tooltip field to the result array. The data from getAttributes data is used in getJsonConfig() which is found in the Magento\ConfigurableProduct\Block\Product\View\Type\Configurable class.

Overriding the configurable products renderer (ProductSwatchPlugin)

The getJsonConfig() method outputs the config as JSON object on the product view page. The (default)template which calls this method is: Magento_Swatches::product/view/renderer.phtml. This template is defined as a constant (in Magento 2.2) and is called using the getRendererTemplate() in the ConfigurableAttributeData class. This prevents us from setting a template using XML.

This is where the ProductSwatchPlugin class comes is. This plugin intercepts the setTemplate call using a before handler (beforeSetTemplate) and sets it to the custom template (vendor/spaggel/tooltip/view/frontend/templates/product/view/renderer.phtml).


Handling configurable products

To make the module work with configurable products, a change on the swatch HTML structure is needed. To achieve this, a change to the swatch renderer (javascript) is needed and we need to override the template (See ProductSwatchPlugin).

Extending the core swatch renderer

Extended by: vendor/spaggel/tooltip/view/frontend/web/js/swatch-renderer.js.

The extended swatch renderer will, if tooltip content is available, render additional HTML. This happens in the call to container.append().

Part of the code:

    '<div class="' + classes.attributeClass + ' ' + item.code + '" ' +
    'attribute-code="' + item.code + '" ' +
    'attribute-id="' + + '">' +
    label +
    toolTipHtml + // the tooltip content (or an empty string)

Actually using the renderer

Because Magento 2.2 does not use the identifier, but the path to the file when initializing the swatches renderer, we can not override it easily. The template (template info in the ProductSwatchPlugin part) gets extended and the SwatchRenderer is used for initializing.

Default init:

"[data-role=swatch-options]": {
    "Magento_Swatches/js/swatch-renderer": {

Full file: vendor/magento/module-swatches/view/frontend/templates/product/view/renderer.phtml

New init:

"[data-role=swatch-options]": {
    "SwatchRenderer": {

Full file: vendor/spaggel/tooltip/view/frontend/templates/product/view/renderer.phtml

SwatchRenderer is defined using requirejs-config.js in the module.

Making the tooltips work

Magento loads the tooltips using JS. By doing so, we can not use things like $(document).ready() and init our tooltips. To overcome this problem we bind to the event swatch.initialized on the swatches and then init the tooltips.


Full file: vendor/spaggel/tooltip/view/frontend/templates/product/view/renderer.phtml

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.