Tooltip for Payment methods in Magento 2

Question

I am trying to show the tooltip for Custom payment method, But it's not working. For this I tried the below code.

html file path (app/code/NStripe/PaymentTerms/view/frontend/web/template/payment/paymentterms.html)

<div class="control _with-tooltip">
<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>
        </div>
         
    <div class="payment-method-content">

        <!-- ko if: getPayTerms() -->
        <div id="custom_payment_content_section1" data-bind="foreach: PaymentList">
            <p id="custom_payment_content1" data-bind="text: PaymentTerms" style="color:#0092cc;font-weight: bold;" class="custom_payment_content1"></p>
        </div>
        <!-- /ko -->


        <br/>

        <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>
<div id="payment_terms_payment" class="field-tooltip toggle">
      <span id="tooltip-label" class="label">
           <!-- Tooltip-->
        </span>
    <span class="field-tooltip-action action-help"
          data-bind="mageInit: {'dropdown':{'activeClass': '_active'}}"
          data-toggle="dropdown"
          aria-haspopup="true"
          aria-expanded="false">
            </span>
    <div class="field-tooltip-content" data-target="dropdown" aria-hidden="true">
        This is the custom text how looks like in the Payment Terms Payment Method.
    </div>
</div>

But it's not showing.

Can you please suggest me to show like Email, Phone Number ? mark style.

Answer 1

Solved, myself by adding/updating the html file and added CSS

<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">
                        This is the custom text how looks like in the Payment Terms Payment Method.
                    </span>
                </span>
        </div>
         
    <div class="payment-method-content">

        <!-- ko if: getPayTerms() -->
        <div id="custom_payment_content_section1" data-bind="foreach: PaymentList">
            <p id="custom_payment_content1" data-bind="text: PaymentTerms" style="color:#0092cc;font-weight: bold;" class="custom_payment_content1"></p>
        </div>
        <!-- /ko -->


        <br/>

        <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>

and the CSS as below

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

And the screen shot as below