•  08-01-2021
  •  | 
  •  

Question

How to include Tooltip for a lastname field in checkout? Tooltip like for email field.

in checkout_index_index.xml I did not find anything.

Was it helpful?

Solution

I find solution in

app\design\frontend\Vendor\Theme\Magento_Checkout\layout\checkout_index_index.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>   
        <move element="logo" destination="logo-header"/>

        <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">
                                                        <!-- The name of the form the field belongs to -->
                                                        <item name="shipping-address-fieldset" xsi:type="array">
                                                            <item name="children" xsi:type="array">

                                                                <item name="lastname" xsi:type="array">
                                                                    <item name="config" xsi:type="array">
                                                                        <item name="tooltip" xsi:type="array">
                                                                            <item name="description" xsi:type="string">Tooltip text here :)</item>
                                                                        </item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

OTHER TIPS

You can archive it by adding this all stuff in phtml file so you design it better.

In your checkout_index_index.xml.

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">

<body>
    <referenceContainer name="content">
        <block class="Namespace\ModuleName\Block\Shipping" name="name.your.demo" after="checkout.root" template="Namespace_ModuleName::yourfile.phtml"></block>
    </referenceContainer> 
</body>

In your phtml file yourfile.phtml

<script type="text/javascript">

require(['jquery', 'yourDemoJs'], function ($) {

    var initYourDemo = function () {
        if (jQuery('#checkout-shipping-method-load .store-container-inner').length) {
            $('body').tour({
                steps: [{
                    title: 'Title One',
                    content: '<p>Your Content One</p>'
                }, {
                    content: '<p>Your Content Two</p>',
                    position: 'right',
                    element: '#ElementIdWhereYouWantToShow'
                }, {
                    content: '<p>Your Content Three</p>',
                    position: 'right',
                    element: '#ElementIdWhereYouWantToShow'
                }]
            });

            $('body').data('tour').start();
        } else {
            setTimeout(initMytour, 2000);
        }
    }
    initYourDemo();
});

Now you only need to write your js script as per your need basis you can customize as you want.

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top