How is a tooltip implemented for the «Phone Number» field on the «Shipping Address» popup on the frontend checkout page?

dmitry_fedyuk · March 30, 2016, 9:24pm

magento/magento2/blob/ce68a6d/app/code/Magento/Checkout/view/frontend/layout/checkout_index_index.xml#L228-L234


<item name="telephone" xsi:type="array">
    <item name="config" xsi:type="array">
        <item name="tooltip" xsi:type="array">
            <item name="description" xsi:type="string" translate="true">For delivery questions.</item>
        </item>
    </item>
</item>

github.com

magento/magento2/blob/ce68a6d/app/code/Magento/Ui/view/frontend/web/templates/form/field.html#L34-L36


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

github.com

magento/magento2/blob/ce68a6d/app/code/Magento/Ui/view/base/web/js/form/element/abstract.js#L24-L24


tooltipTpl: 'ui/form/element/helper/tooltip',

github.com

magento/magento2/blob/ce68a6d/app/code/Magento/Ui/view/frontend/web/templates/form/element/helper/tooltip.html#L7-L27


<div class="field-tooltip toggle">


   <!-- ko if: (tooltip.link)-->
   <a class="field-tooltip-action action-help"
      target="_blank"
      data-toggle="dropdown"
      data-bind="attr: {href: tooltip.link}, mageInit: {'dropdown':{'activeClass': '_active'}}"></a>
    <!-- /ko -->


    <!-- ko if: (!tooltip.link)-->
    <span class="field-tooltip-action action-help"
       tabindex="0"
       data-toggle="dropdown"
       data-bind="mageInit: {'dropdown':{'activeClass': '_active'}}"></span>
    <!-- /ko -->


   <div class="field-tooltip-content"
        data-target="dropdown">
       <!-- ko text: tooltip.description --><!-- /ko -->
   </div>
</div>

dmitry_fedyuk · March 30, 2016, 9:51pm