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

- Updates after merge

Author: Oleg Zinoviev

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>

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>