0

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.

enter image description here

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

0

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 enter image description here

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.