3

I tried to remove tooltip in several ways but anything worked. What's the XML code needed to do this and in which xml file do i have to make the change?

Here is one of my attempts

    <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="children" xsi:type="array">
                                    <item name="shipping-step" xsi:type="array">
                                        <item name="children" xsi:type="array">
                                            <item name="shippingAddress" xsi:type="array">
                                                <item name="children" xsi:type="array">
                                                    <item name="telephone" xsi:type="array">
                                                        <!--Remove item-->
                                                        <item name="tooltip" xsi:type="array">
                                                               <item name="componentDisabled" xsi:type="boolean">true</item>                         
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
  • You can Remove with CSS – Manoj Deswal Jul 21 '17 at 23:26
13

I really really don't know if it's the Magento right way but I tried this:

<item name="telephone" xsi:type="array">
  <item name="config" xsi:type="array">
      <item name="tooltip" xsi:type="boolean">false</item>
  </item>
</item>

and it worked for me.

After many attempts I came to this conclusion: the Knockout template searches for the element tooltip

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

so it's expecting it to exist OR to be a boolean value set to true, so I just converted it in type boolean set to false.

  • 1
    Hi Loreena, in my opinion this solution is the correct one, because "tooltip" is not a "component". In your first version you tried to set "componentDisabled" to false, but this won't work, because "tooltip" is only a property of the component "telephone" (it is not made within telephone > children it is set in telephone > config). With this solution now, you set the property "tooltip" to false and, as you described before, the telephone component checks, if the property is set or false. So this seems to be a good way for me. – MariaK Oct 13 '17 at 14:37
3

We can hide it with CSS. However, we can use Plugin to remove it:

app/code/Vendor/Checkout/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="custom-checkout-process" type="Vendor\Checkout\Plugin\LayoutProcessorPlugin" />
    </type>
</config>

app/code/Vendor/Checkout/Plugin/LayoutProcessorPlugin.php

<?php

namespace Vendor\Checkout\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']['telephone']['config']['tooltip']);

        return $jsLayout;
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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