diff --git a/app/code/Magento/Authorizenet/view/frontend/web/template/payment/authorizenet-directpost.html b/app/code/Magento/Authorizenet/view/frontend/web/template/payment/authorizenet-directpost.html
index 0ea2ebb85fe98034cba2fdc98a52e3c55d72eecc..e596ced5d783473c5196c3b06b5d9f15763b8795 100644
--- a/app/code/Magento/Authorizenet/view/frontend/web/template/payment/authorizenet-directpost.html
+++ b/app/code/Magento/Authorizenet/view/frontend/web/template/payment/authorizenet-directpost.html
@@ -54,14 +54,14 @@
<button data-role="review-save"
type="submit"
data-bind="
- attr: {title: $t('Place order')},
+ attr: {title: $t('Place Order')},
enable: (getCode() == isChecked()),
click: placeOrder,
css: {disabled: !isPlaceOrderActionAllowed()}
"
class="action primary checkout"
disabled>
- <span data-bind="text: $t('Place order')"></span>
+ <span data-bind="text: $t('Place Order')"></span>
</button>
</div>
</div>
diff --git a/app/code/Magento/Braintree/view/frontend/web/template/payment/braintree-paypal-form.html b/app/code/Magento/Braintree/view/frontend/web/template/payment/braintree-paypal-form.html
index 2ce6b39838900f17d21965894ca4eeff9a11c4fa..149e1bdfd542001bcbd1a6d9bddd413e4812206d 100644
--- a/app/code/Magento/Braintree/view/frontend/web/template/payment/braintree-paypal-form.html
+++ b/app/code/Magento/Braintree/view/frontend/web/template/payment/braintree-paypal-form.html
@@ -34,14 +34,14 @@
<button data-role="review-save"
type="submit"
data-bind="
- attr: {title: $t('Place order')},
+ attr: {title: $t('Place Order')},
enable: (getCode() == isChecked()),
click: placeOrder,
css: {disabled: !isPlaceOrderActionAllowed()}
"
class="action primary checkout"
disabled>
- <span data-bind="text: $t('Place order')"></span>
+ <span data-bind="text: $t('Place Order')"></span>
</button>
</div>
</div>
diff --git a/app/code/Magento/Braintree/view/frontend/web/template/payment/cc-form.html b/app/code/Magento/Braintree/view/frontend/web/template/payment/cc-form.html
index c59b42eac2e721022f281f72e25e62427d1a7e90..8073eb00f64e4e625db30b08a1174bea759c772a 100644
--- a/app/code/Magento/Braintree/view/frontend/web/template/payment/cc-form.html
+++ b/app/code/Magento/Braintree/view/frontend/web/template/payment/cc-form.html
@@ -151,12 +151,26 @@
<span><!-- ko text: $t('Card Verification Number')--><!-- /ko --></span>
</label>
<div class="control">
- <input type="number" class="input-text cvv" name="payment[cc_cid]" value=""
- data-bind="attr: {id: getCode() + '_cc_cid', title: $t('Card Verification Number'), 'data-container': getCode() + '-cc-cvv', 'data-validate': JSON.stringify({'required-number':true, 'validate-cc-cvn':'#' + getCode() + '_cc_type'})},
- enable: true,
- value: creditCardVerificationNumber"/>
- <div class="note">
- <a href="#" class="action cvv" data-bind="attr: {title: $t('What is this?')}, mageInit:{'tooltip': {'content': getCvvImageHtml()}}"><span><!-- ko text: $t('What is this?')--><!-- /ko --></span></a>
+ <input type="number"
+ class="input-text cvv"
+ name="payment[cc_cid]"
+ value=""
+ data-bind="attr: {id: getCode() + '_cc_cid',
+ title: $t('Card Verification Number'),
+ 'data-container': getCode() + '-cc-cvv',
+ 'data-validate': JSON.stringify({'required-number':true, 'validate-cc-cvn':'#' + getCode() + '_cc_type'})},
+ enable: true,
+ value: creditCardVerificationNumber" />
+ <div class="field-tooltip toggle">
+ <span class="field-tooltip-action action-cvv"
+ tabindex="0"
+ data-toggle="dropdown"
+ data-bind="attr: {title: $t('What is this?')}, mageInit: {'dropdown':{'activeClass': '_active'}}">
+ <span><!-- ko text: $t('What is this?')--><!-- /ko --></span>
+ </span>
+ <div class="field-tooltip-content"
+ data-target="dropdown"
+ data-bind="html: getCvvImageHtml()"></div>
</div>
</div>
</div>
diff --git a/app/code/Magento/Payment/view/frontend/web/template/payment/cc-form.html b/app/code/Magento/Payment/view/frontend/web/template/payment/cc-form.html
index 0b7e69fa0bd0acb5bcbdc48eabf1633cfdb325c1..c630d0039928ea9aaf53c035d5279f59fb529ee1 100644
--- a/app/code/Magento/Payment/view/frontend/web/template/payment/cc-form.html
+++ b/app/code/Magento/Payment/view/frontend/web/template/payment/cc-form.html
@@ -99,15 +99,27 @@
<span><!-- ko text: $t('Card Verification Number')--><!-- /ko --></span>
</label>
<div class="control _with-tooltip">
- <input type="number" autocomplete="off" class="input-text cvv" name="payment[cc_cid]" value=""
- data-bind="attr: {id: getCode() + '_cc_cid', title: $t('Card Verification Number'), 'data-container': getCode() + '-cc-cvv', 'data-validate': JSON.stringify({'required-number':true, 'validate-card-cvv':'#' + getCode() + '_cc_type'})},
- enable: isActive($parents),
- value: creditCardVerificationNumber"/>
+ <input type="number"
+ autocomplete="off"
+ class="input-text cvv"
+ name="payment[cc_cid]"
+ value=""
+ data-bind="attr: {id: getCode() + '_cc_cid',
+ title: $t('Card Verification Number'),
+ 'data-container': getCode() + '-cc-cvv',
+ 'data-validate': JSON.stringify({'required-number':true, 'validate-card-cvv':'#' + getCode() + '_cc_type'})},
+ enable: isActive($parents),
+ value: creditCardVerificationNumber" />
<div class="field-tooltip toggle">
- <span class="field-tooltip-action action-cvv" data-bind="attr: {title: $t('What is this?')}">
+ <span class="field-tooltip-action action-cvv"
+ tabindex="0"
+ data-toggle="dropdown"
+ data-bind="attr: {title: $t('What is this?')}, mageInit: {'dropdown':{'activeClass': '_active'}}">
<span><!-- ko text: $t('What is this?')--><!-- /ko --></span>
</span>
- <div class="field-tooltip-content" data-bind="html: getCvvImageHtml()"></div>
+ <div class="field-tooltip-content"
+ data-target="dropdown"
+ data-bind="html: getCvvImageHtml()"></div>
</div>
</div>
</div>
diff --git a/app/code/Magento/Payment/view/frontend/web/template/payment/iframe.html b/app/code/Magento/Payment/view/frontend/web/template/payment/iframe.html
index b9abaa6694130fb7fdd959b431f45965d9c2a5ec..82774b93a59fe3d483ba3f4d3ee0987d45b4b3e9 100644
--- a/app/code/Magento/Payment/view/frontend/web/template/payment/iframe.html
+++ b/app/code/Magento/Payment/view/frontend/web/template/payment/iframe.html
@@ -29,9 +29,9 @@
<div class="actions-toolbar" id="review-buttons-container">
<div class="primary">
<button data-role="review-save" type="submit"
- data-bind="attr: {title: $t('Place order')}"
+ data-bind="attr: {title: $t('Place Order')}"
class="button action primary checkout">
- <span data-bind="text: $t('Place order')"></span>
+ <span data-bind="text: $t('Place Order')"></span>
</button>
<button type="submit" id="originalPlaceOrder" class="hidden"
data-bind="click: originalPlaceOrder($parents[1])"></button>
diff --git a/app/code/Magento/Paypal/view/frontend/web/template/payment/payflowpro-form.html b/app/code/Magento/Paypal/view/frontend/web/template/payment/payflowpro-form.html
index 0292ef42cfd55d0cff8b7b7944c97595e7c6c00d..5ebcba12664785178c1fdf5f7562e1b51ab6d4d8 100644
--- a/app/code/Magento/Paypal/view/frontend/web/template/payment/payflowpro-form.html
+++ b/app/code/Magento/Paypal/view/frontend/web/template/payment/payflowpro-form.html
@@ -53,14 +53,14 @@
<button data-role="review-save"
type="submit"
data-bind="
- attr: {title: $t('Place order')},
+ attr: {title: $t('Place Order')},
enable: (getCode() == isChecked()),
click: placeOrder,
css: {disabled: !isPlaceOrderActionAllowed()}
"
class="action primary checkout"
disabled>
- <span data-bind="text: $t('Place order')"></span>
+ <span data-bind="text: $t('Place Order')"></span>
</button>
</div>
</div>
diff --git a/app/code/Magento/Shipping/view/frontend/web/template/checkout/shipping/shipping-policy.html b/app/code/Magento/Shipping/view/frontend/web/template/checkout/shipping/shipping-policy.html
index 2cbe9af66082875918159428833dee017e075ebf..22deac392831ca05a8b738283d7e26adfe34ee92 100644
--- a/app/code/Magento/Shipping/view/frontend/web/template/checkout/shipping/shipping-policy.html
+++ b/app/code/Magento/Shipping/view/frontend/web/template/checkout/shipping/shipping-policy.html
@@ -4,11 +4,16 @@
* See COPYING.txt for license details.
*/
-->
-<div class="shipping-policy-block field-tooltip" data-bind="visible: config.isEnabled">
- <span class="field-tooltip-action">
+<div class="shipping-policy-block field-tooltip"
+ data-bind="visible: config.isEnabled">
+ <span class="field-tooltip-action"
+ tabindex="0"
+ data-toggle="dropdown"
+ data-bind="mageInit: {'dropdown':{'activeClass': '_active'}}">
<!-- ko text: $t('See our Shipping Policy') --><!-- /ko -->
</span>
- <div class="field-tooltip-content">
+ <div class="field-tooltip-content"
+ data-target="dropdown">
<span data-bind="html: config.shippingPolicyContent"></span>
</div>
</div>
diff --git a/app/code/Magento/Ui/view/frontend/web/templates/form/element/helper/tooltip.html b/app/code/Magento/Ui/view/frontend/web/templates/form/element/helper/tooltip.html
index b2ef214e944a5e63c14f8b00f6d4297280baa284..cc0a600888c1829ef2de7e034f420b8b74bbb45d 100644
--- a/app/code/Magento/Ui/view/frontend/web/templates/form/element/helper/tooltip.html
+++ b/app/code/Magento/Ui/view/frontend/web/templates/form/element/helper/tooltip.html
@@ -5,9 +5,23 @@
*/
-->
<div class="field-tooltip toggle">
- <a class="field-tooltip-action action-help" target="_blank" data-bind="attr: {href: tooltip.link}">
- </a>
- <div class="field-tooltip-content">
+
+ <!-- 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>
diff --git a/app/design/adminhtml/Magento/backend/web/css/source/components/_popups.less b/app/design/adminhtml/Magento/backend/web/css/source/components/_popups.less
index 6b61accec5875976a780ef4169fc472b595ec6fb..c9ced7dba320629247a6d27e622bb7d7187668e2 100644
--- a/app/design/adminhtml/Magento/backend/web/css/source/components/_popups.less
+++ b/app/design/adminhtml/Magento/backend/web/css/source/components/_popups.less
@@ -482,6 +482,10 @@
}
}
+.ui-widget-overlay {
+ &:extend(.abs-modal-overlay all);
+}
+
.overlay_magento {
&:extend(.abs-modal-overlay all);
z-index: 800 !important;
diff --git a/app/design/frontend/Magento/blank/Magento_Checkout/web/css/source/module/checkout/_tooltip.less b/app/design/frontend/Magento/blank/Magento_Checkout/web/css/source/module/checkout/_tooltip.less
index d867cc3387355f400f35932bbad34242d21c4c06..cc9d6c7a0876c7702b9aada9ac1e9cab19eaf948 100644
--- a/app/design/frontend/Magento/blank/Magento_Checkout/web/css/source/module/checkout/_tooltip.less
+++ b/app/design/frontend/Magento/blank/Magento_Checkout/web/css/source/module/checkout/_tooltip.less
@@ -37,13 +37,14 @@
& when (@media-common = true) {
.field-tooltip {
+ cursor: pointer;
position: absolute;
right: 0;
top: 1px;
- &:hover {
+ &._active {
.css(z-index, @checkout-tooltip__hover__z-index);
- cursor: pointer;
+
.field-tooltip-content {
display: block;
}
@@ -56,19 +57,23 @@
.field-tooltip-action {
.icon-font(
- @checkout-tooltip-icon__content,
- @_icon-font-size: @checkout-tooltip-icon__font-size,
- @_icon-font-text-hide: true,
- @_icon-font-color: @checkout-tooltip-icon__color,
- @_icon-font-color-hover: @checkout-tooltip-icon__hover__color,
- @_icon-font-color-active: false
+ @checkout-tooltip-icon__content,
+ @_icon-font-size: @checkout-tooltip-icon__font-size,
+ @_icon-font-text-hide: true,
+ @_icon-font-color: @checkout-tooltip-icon__color,
+ @_icon-font-color-hover: @checkout-tooltip-icon__hover__color,
+ @_icon-font-color-active: false
);
+
&:focus {
- &:before {
- .css(color, @checkout-tooltip-icon__hover__color);
- }
- + .field-tooltip-content {
- display: block;
+ ._keyfocus & {
+ .css(z-index, @checkout-tooltip__hover__z-index);
+ + .field-tooltip-content {
+ display: block;
+ }
+ &:before {
+ .css(color, @checkout-tooltip-icon__hover__color);
+ }
}
}
}
diff --git a/app/design/frontend/Magento/blank/web/css/source/_extends.less b/app/design/frontend/Magento/blank/web/css/source/_extends.less
index 19705339dae3c4f0430aac361f16a2952ef1350c..0983be45a276f5216ecf108e4024013ad0323ed2 100644
--- a/app/design/frontend/Magento/blank/web/css/source/_extends.less
+++ b/app/design/frontend/Magento/blank/web/css/source/_extends.less
@@ -1046,18 +1046,6 @@
input {
.css(margin-right, @indent__s);
width: calc(~"100% - (@{checkout-tooltip-icon__font-size} + @{indent__s} + @{indent__xs})");
- &:focus {
- + .field-tooltip {
- .field-tooltip-action {
- &:before {
- .css(color, @checkout-tooltip-icon__hover__color);
- }
- }
- .field-tooltip-content {
- display: block;
- }
- }
- }
}
}
diff --git a/app/design/frontend/Magento/luma/web/css/source/_extends.less b/app/design/frontend/Magento/luma/web/css/source/_extends.less
index 04018f6977c016c96c9444e206a8eb64ba787fff..bdd133e5cc3fcc9a182333062090ce1417b545da 100644
--- a/app/design/frontend/Magento/luma/web/css/source/_extends.less
+++ b/app/design/frontend/Magento/luma/web/css/source/_extends.less
@@ -1434,18 +1434,6 @@
input {
.css(margin-right, @indent__s);
width: calc(~"100% - (@{checkout-tooltip-icon__font-size} + @{indent__s} + @{indent__xs})");
- &:focus {
- + .field-tooltip {
- .field-tooltip-action {
- &:before {
- .css(color, @checkout-tooltip-icon__hover__color);
- }
- }
- .field-tooltip-content {
- display: block;
- }
- }
- }
}
}
diff --git a/lib/web/mage/dropdowns.js b/lib/web/mage/dropdowns.js
index 83f692461544fb7fd59084946fcb7072971402cd..85f9214c4b4a62122522a984ee8bbee8f2f1650b 100644
--- a/lib/web/mage/dropdowns.js
+++ b/lib/web/mage/dropdowns.js
@@ -108,7 +108,7 @@ define([
if(options.autoclose === true) {
self.reset({elems: actionElem.not(elem)});
}
- self[elem.hasClass('active') ? 'closeDropdown' : 'openDropdown'](elem);
+ self[elem.hasClass(options.activeClass) ? 'closeDropdown' : 'openDropdown'](elem);
return false;
});