2

Tell me how to remove tooltip from the checkout email field. enter image description here

I tried this way

enter image description here

app/code/Dv/Tooltip/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Dv_Tooltip',
    __DIR__
);

app/code/Dv/Tooltip/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Dv_Tooltip" setup_version="1.0.0" />
</config>

app/code/Dv/Tooltip/etc/frontend/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
        <plugin name="dv-checkout-process" type="Dv\Tooltip\Plugin\LayoutProcessorPlugin" />
    </type>
</config>

app/code/Dv/Tooltip/Plugin/LayoutProcessorPlugin.php

<?php

namespace Dv\Tooltip\Plugin;

use Magento\Checkout\Block\Checkout\LayoutProcessor;

class LayoutProcessorPlugin
{
    /**
     * @param LayoutProcessor $subject
     * @param $jsLayout
     * @return mixed
     */
    public function afterProcess(
        LayoutProcessor $subject,
        $jsLayout
    ) {
        //Remove telephone tooltip
        unset($jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
            ['children']['shippingAddress']['children']['shipping-address-fieldset']['children']['email']['config']['tooltip']);

        return $jsLayout;
    }
}

php bin/magento s:up

After this tooltip is still there

1

4 Answers 4

4

You can use this line to remove email tooltip text.

unset($jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']['shippingAddress']['children']['customer-email']['tooltip']);

Instead of using this..

unset($jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']['shippingAddress']['children']['shipping-address-fieldset']['children']['email']['config']['tooltip']);

After changing this please clear Magento cache and check you can't see tooltip text but you can see tooltip icon there. If you want to remove that icon then you need to override below file in your custom theme/module..

vendor/magento/module-checkout/view/frontend/web/template/form/element/email.html

In above file you just need to remove below line

<!-- ko template: 'ui/form/element/helper/tooltip' --><!-- /ko -->

Once you remove this line you will not get that tooltip icon for email. So you do not need to create any Plugin to remove Tooltip text, you can directly remove above line in html file and you can hide it.

Hope this will help you!

0
1

There is another way - just by using xml template. I think this would probably be more proper instead of adding a plugin. Discussion is open.

Create app/design/frontend/Vendor/Magento_Checkout/layout/checkout_index_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="checkout.root">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="steps" xsi:type="array">
                                    <item name="component" xsi:type="string">uiComponent</item>
                                    <item name="displayArea" xsi:type="string">steps</item>
                                    <item name="children" xsi:type="array">
                                        <item name="shipping-step" xsi:type="array">
                                            <item name="component" xsi:type="string">uiComponent</item>
                                            <item name="sortOrder" xsi:type="string">1</item>
                                            <item name="children" xsi:type="array">
                                                <item name="shippingAddress" xsi:type="array">
                                                    <item name="component" xsi:type="string">Magento_Checkout/js/view/shipping</item>
                                                    <item name="displayArea" xsi:type="string">shipping</item>
                                                    <item name="tooltip" xsi:type="array">
                                                        <item name="description" xsi:type="string" translate="true">We'll send your order confirmation here.</item>
                                                    </item>
                                                    <item name="children" xsi:type="array">
                                                        <item name="customer-email" xsi:type="array">
                                                            <item name="component" xsi:type="string">Magento_Checkout/js/view/form/element/email</item>
                                                            <item name="displayArea" xsi:type="string">customer-email</item>
                                                            <item name="config" xsi:type="array">
                                                                <item name="tooltip" xsi:type="boolean">false</item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Adding the following will disable the ui component:

<item name="children" xsi:type="array">
  <item name="customer-email" xsi:type="array">
    <item name="component" xsi:type="string">Magento_Checkout/js/view/form/element/email</item>
       <item name="displayArea" xsi:type="string">customer-email</item>
         <item name="config" xsi:type="array">
          <item name="tooltip" xsi:type="boolean">false</item>...(add closing tags)

And then if you want to move that tooltip anywhere else in the form, you can do so by adding:

<item name="children" xsi:type="array">
  <item name="shippingAddress" xsi:type="array">
    <item name="component" xsi:type="string">Magento_Checkout/js/view/shipping</item>
      <item name="displayArea" xsi:type="string">shipping</item>
        <item name="tooltip" xsi:type="array">
          <item name="description" xsi:type="string" translate="true">We'll send your order confirmation here.</item> ...(add closing tags)

Then extend or add the following to your html template (in my case I wanted to add tooltip next to the customer email title app/design/frontend/Vendor/Magento_Checkout/web/template/shipping.html):

<li id="shipping-customer-email" class="checkout-shipping-address" data-bind="fadeVisible: visible()">
    <div class="shipping-title-tooltip">
        <div class="step-title" translate="'Your Email Address'" data-role="title"/>
        <!-- ko template: 'ui/form/element/helper/tooltip' --><!-- /ko --> //this needs to be positioned absolute to li
    </div>
    <each if="!quoteIsVirtual" args="getRegion('customer-email')" render=""/>
    <each args="getRegion('address-list')" render=""/>
    <each args="getRegion('address-list-additional-addresses')" render=""/>
</li>

enter image description here

<!-- ko if: element.tooltip -->
    <!-- ko template: element.tooltipTpl --><!-- /ko -->
<!-- /ko -->

or

<!-- ko template: 'ui/form/element/helper/tooltip' --><!-- /ko -->

The Knockout template searches for the element tooltip and renders it.

This way of doing it is based on extending vendor/magento/module-checkout/view/frontend/layout/checkout_index_index.xml file but your layout might be different so you'd just have to shift the code to match the layout hierarchy.

1
  • The XML method works for me! Everyone was talking about doing it via PHP Layout Processor, but that will cause your code to scatter if you only want to write within theme. +1.
    – giangvdm
    Oct 6, 2023 at 4:17
0

Just add 'null' value for tooltip field, like so:

$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']['shippingAddress']['children']['customer-email']['config']['tooltip'] = null;

It does work woth 'telephone' on shipping form field in Magento 2.3

0

Open the file vendor/magento/module-ui/view/frontend/web/templates/form/element/helper/tooltip.html

And find below code in the file:

<\span id="tooltip-label" class="label"\><\!-- ko i18n: 'Tooltip' --><!-- /ko --><\/span>

Make the code changes as mentioned below:

<\span id="tooltip-label" class="label"\><\/span\>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.