MAGETWO-39999: Hints behave not user-friendly on Storefront

- dropdownDialog widget is added.

Author: Oleg Zinoviev

app/code/Magento/Shipping/view/frontend/web/template/checkout/shipping/shipping-policy.html

@@ -4,11 +4,21 @@
  * 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-block="shipping-policy-block"
+     data-bind="visible: config.isEnabled">
+    <span class="field-tooltip-action" data-trigger="shipping-tooltip-action">
         <!-- ko text: $t('See our Shipping Policy') --><!-- /ko -->
     </span>
-    <div class="field-tooltip-content">
+    <div class="field-tooltip-content"
+         data-bind="mageInit: {
+            'dropdownDialog':{
+                'appendTo': '[data-block=shipping-policy-block]',
+                'triggerTarget': '[data-trigger=shipping-tooltip-action]',
+                'closeOnMouseLeave': false,
+                'triggerClass': '_active',
+                'buttons': []
+            }}">
         <span data-bind="html: config.shippingPolicyContent"></span>
     </div>
 </div>

app/code/Magento/Ui/view/frontend/web/templates/form/element/helper/tooltip.html

@@ -4,10 +4,20 @@
  * See COPYING.txt for license details.
  */
 -->
- <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">
+ <div class="field-tooltip toggle" data-block="field-tooltip-block">
+    <a class="field-tooltip-action action-help"
+       target="_blank"
+       data-trigger="field-tooltip-action"
+       data-bind="attr: {href: tooltip.link}"></a>
+    <div class="field-tooltip-content"
+         data-bind="mageInit: {
+            'dropdownDialog':{
+                'appendTo': '[data-block=field-tooltip-block]',
+                'triggerTarget': '[data-trigger=field-tooltip-action]',
+                'closeOnMouseLeave': false,
+                'triggerClass': '_active',
+                'buttons': []
+            }}">
         <!-- ko text: tooltip.description --><!-- /ko -->
     </div>
 </div>

app/design/frontend/Magento/blank/Magento_Checkout/web/css/source/module/checkout/_tooltip.less

@@ -41,19 +41,6 @@
         right: 0;
         top: 1px;
 
-        &:hover {
-            .css(z-index, @checkout-tooltip__hover__z-index);
-            cursor: pointer;
-            .field-tooltip-content {
-                display: block;
-            }
-            .field-tooltip-action {
-                &:before {
-                    .css(color, @checkout-tooltip-icon__hover__color);
-                }
-            }
-        }
-
         .field-tooltip-action {
             .icon-font(
             @checkout-tooltip-icon__content,
@@ -63,13 +50,11 @@
             @_icon-font-color-hover: @checkout-tooltip-icon__hover__color,
             @_icon-font-color-active: false
             );
-            &:focus {
+
+            &._active {
                 &:before {
                     .css(color, @checkout-tooltip-icon__hover__color);
                 }
-                + .field-tooltip-content {
-                    display: block;
-                }
             }
         }
 

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