0

I want to edit tooltip for "City" field,

in

base/default/template/checkout/onepage/billing.phtml

How can I edit the tooltip for the field ?

1

First let me know which content you want to show in tootip you can use this code for showing tooltip, you just have to manage it for your side:

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Tooltip functionality</title>
  <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
  <script>
     $(function() {
        $("#tooltip-1").tooltip();
        $("#tooltip-2").tooltip();
     });
  </script>
</head>
<body> 
     <label for="name">Name:</label>
     <input id="tooltip-1" title="Enter You name">
     <p><a id="tooltip-2" href="#" title="Nice tooltip">
        I also have a tooltip
     </a></p>
</body>
</html>

If your theme not have any jquery then add otherwise you dont need to that

0

Here you can archive it in Magento 2 by adding this all stuff in phtml file so you can 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">
//You need to add yourDemoJs.js using requirejs-config.js
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.

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.