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

- Updated to dropdowns widget.

Author: Oleg Zinoviev

app/code/Magento/Payment/view/frontend/web/template/payment/cc-form.html

@@ -104,10 +104,14 @@
                              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"
+                      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>

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

@@ -5,20 +5,14 @@
  */
 -->
 <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">
+    <span class="field-tooltip-action"
+          data-toggle="dropdown"
+          data-bind="mageInit: {'dropdown':{'activeClass': '_active'}}">
         <!-- ko text: $t('See our Shipping Policy') --><!-- /ko -->
     </span>
     <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': []
-            }}">
+         data-target="dropdown">
         <span data-bind="html: config.shippingPolicyContent"></span>
     </div>
 </div>

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

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

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

@@ -41,14 +41,31 @@
         right: 0;
         top: 1px;
 
+        &:hover {
+            cursor: pointer;
+        }
+
+        &._active {
+            .css(z-index, @checkout-tooltip__hover__z-index);
+
+            .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,
-            @_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
             );
 
             &._active {

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