Tooltip for Payment methods in Magento 2
-
15-04-2021 - |
题
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.
解决方案
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;
}