How to Add Tooltip for Specific Payment Method on Checkout Page?

Hello Magento Friends,

Once your customers reach the checkout page at your Magento 2 store, we must ensure customers have all the necessary information to complete their purchase confidently. Some payment methods require more explanation, whether it be a wallet-based payment, EMI, or bank transfer.

One of the easiest ways to do this is to add tooltips next to the payment method titles. In this blog, we’ll guide you step-by-step on how to add a custom tooltip for a specific payment method in Magento 2.

Steps to Add Tooltip for Specific Payment Method on Magento 2 Checkout Page:

Step 1: Create a “requirejs-config.js” file inside our extension at the following path.

app\code\Vendor\Extension\view\frontend\requirejs-config.js

Then add the following code

var config = {
    map: {
        '*': {
            'Magento_OfflinePayments/template/payment/checkmo': 'Vendor_Extension/template/payment'
        }
    }
};

Step 2: Create a “payment.html” file inside our extension at the following path.

app\code\Vendor\Extension\view\frontend\web\template\payment.html

Now add the below code

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked())}">
    <div class="payment-method-title field choice">
        <input type="radio"
               name="payment[method]"
               class="radio"
               data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()"/>
        <label data-bind="attr: {'for': getCode()}" class="label"><span data-bind="text: getTitle()"></span></label>
        <span id="payment_terms_css" class="field-tooltip toggle">
            <span class="field-tooltip-action action-help"
                  data-bind="mageInit: {'dropdown':{'activeClass': '_active'}}"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false">
             </span>
            <span class="field-tooltip-content" data-target="dropdown" aria-hidden="true">
                Select a payment method to proceed with your order.
            </span>
        </span>
    </div>
    <div class="payment-method-content">
        <!-- ko foreach: getRegion('messages') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
        <div class="payment-method-billing-address">
            <!-- ko foreach: $parent.getRegion(getBillingAddressFormName()) -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        </div>
        <!-- ko if: getMailingAddress() || getPayableTo() -->
        <dl class="items check payable">
            <!-- ko if: getPayableTo() -->
            <dt class="title"><!-- ko i18n: 'Make Check payable to:' --><!-- /ko --></dt>
            <dd class="content"><!-- ko text: getPayableTo() --><!-- /ko --></dd>
            <!-- /ko -->
            <!-- ko if: getMailingAddress() -->
            <dt class="title"><!-- ko i18n: 'Send Check to:' --><!-- /ko --></dt>
            <dd class="content">
                <address class="checkmo mailing address" data-bind="html: getMailingAddress()"></address>
            </dd>
            <!-- /ko -->
        </dl>
        <!-- /ko -->
        <div class="checkout-agreements-block">
            <!-- ko foreach: $parent.getRegion('before-place-order') -->
                <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        </div>
        <div class="actions-toolbar">
            <div class="primary">
                <button class="action primary checkout"
                        type="submit"
                        data-bind="
                        click: placeOrder,
                        attr: {title: $t('Place Order')},
                        css: {disabled: !isPlaceOrderActionAllowed()},
                        enable: (getCode() == isChecked())
                        "
                        disabled>
                    <span data-bind="i18n: 'Place Order'"></span>
                </button>
            </div>
        </div>
    </div>
</div>

Step 3: Create a “_module.less” file inside our extension at the following path.

app\code\Vendor\Extension\view\frontend\web\css\source\_module.less

Then add the below-mentioned code

.payment_terms_css{
    cursor: pointer;
    position: relative !important;
    right: 0;
    top: 1px;
}

Output:

Conclusion:

Adding tooltips for specific payment methods helps develop customer trust, and reduces confusion during checkout. With a few simple templates and layout changes, you can provide helpful customer guidance at the most important stage of their purchase journey.

Happy Coding!

FAQ

1. What is a tooltip in Magento 2?

A tooltip, which is a small popup that displays helpful information, such as the name of the payment method on the checkout page, appears when a user hovers over an item or icon.

2. Why would I want to add a tooltip to a payment method?

Tooltips can be used to improve customer experience and readability at checkout by describing payment method details, fees, processing time, or restrictions.

3. Will the checkout functionality change if a tooltip is added?

No, when done correctly, the tooltip will only provide information and act as a visual effect; it won’t have any impact on checkout.