Show tooltip when you copy the password with the keyboard

Fixes: https://github.com/lesspass/lesspass/issues/248

package-lock.json

@@ -1809,6 +1809,11 @@
       "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
       "dev": true
     },
+    "balloon-css": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/balloon-css/-/balloon-css-0.5.0.tgz",
+      "integrity": "sha1-ajwGXvq56l9QmpXUMV3wCq4RT6M="
+    },
     "base": {
       "version": "0.11.2",
       "resolved": "https://registry.npmjs.org/base/-/base-0.11.2.tgz",
@@ -6028,11 +6033,6 @@
       "integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0=",
       "dev": true
     },
-    "hint.css": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/hint.css/-/hint.css-2.5.0.tgz",
-      "integrity": "sha1-OMrjZn5C2R392+UDEAqzSTL2/WU="
-    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",

package.json

@@ -28,10 +28,10 @@
     "@oslab/btoa": "^0.1.0",
     "awesomplete": "^1.1.2",
     "axios": "^0.18.0",
+    "balloon-css": "^0.5.0",
     "bootstrap": "^4.0.0",
     "copy-text-to-clipboard": "^1.0.4",
     "font-awesome": "^4.7.0",
-    "hint.css": "^2.5.0",
     "jwt-decode": "^2.2.0",
     "lesspass": "^6.0.0",
     "lodash.debounce": "^4.0.8",

src/LessPass.scss

@@ -33,7 +33,7 @@
 //@import "~bootstrap/scss/carousel";
 @import "~bootstrap/scss/utilities";
 @import '~font-awesome/css/font-awesome.css';
-@import '~hint.css/hint.css';
+@import '~balloon-css/balloon.css';
 @import '~awesomplete/awesomplete.css';
 
 .lesspass--unbordered #lesspass{

src/components/MasterPassword.vue

@@ -36,10 +36,10 @@
             v-if="fingerprint && value"
             v-on:click="togglePasswordType">
         <button id="fingerprint" class="btn" type="button" tabindex="-1">
-            <small class="hint--left">
-                <i class="fa fa-fw" v-bind:class="[icon1]" v-bind:style="{ color: color1 }"></i>
-                <i class="fa fa-fw" v-bind:class="[icon2]" v-bind:style="{ color: color2 }"></i>
-                <i class="fa fa-fw" v-bind:class="[icon3]" v-bind:style="{ color: color3 }"></i>
+            <small>
+              <i class="fa fa-fw" v-bind:class="[icon1]" v-bind:style="{ color: color1 }"></i>
+              <i class="fa fa-fw" v-bind:class="[icon2]" v-bind:style="{ color: color2 }"></i>
+              <i class="fa fa-fw" v-bind:class="[icon3]" v-bind:style="{ color: color3 }"></i>
             </small>
         </button>
       </span>
@@ -49,7 +49,7 @@
             class="btn btn-link btn-sm p-0"
             v-if="showEncryptButton"
             v-on:click="encryptMasterPassword()"
-            v-bind:class="{'disabled': email === '', 'hint--top hint--medium': email !== ''}">
+            v-bind:class="{'disabled': email === ''}">
       <small>{{ EncryptButtonText }}</small>
     </button>
   </div>

src/components/Options.vue

@@ -79,8 +79,9 @@
       </div>
       <div class="col-5 col-sm-4">
         <label for="passwordCounter"
-               class="hint--top hint--medium"
-               v-bind:aria-label="$t('CounterFieldHelp','Increment this value to change the generated password without changing your master options.')">
+               data-balloon-length="large"
+               v-bind:data-balloon="$t('CounterFieldHelp', 'Increment this value to change the generated password without changing your master password.')"
+               data-balloon-pos="up">
           {{$t('Counter')}}
         </label>
         <div class="input-group input-group-sm">

src/services/tooltip.js

@@ -1,9 +1,11 @@
-export function showTooltip(elem, msg, classes = "hint--top") {
-  var classNames = elem.className;
-  elem.setAttribute("class", `${classNames} ${classes}`);
-  elem.setAttribute("aria-label", msg);
-  setTimeout(function() {
-    elem.setAttribute("class", classNames);
-    elem.setAttribute("aria-label", "");
-  }, 2000);
+export function showTooltip(element, message, position = "right") {
+  element.setAttribute("data-balloon", message);
+  element.setAttribute("data-balloon-visible", "");
+  element.setAttribute("data-balloon-pos", position);
+}
+
+export function hideTooltip(element) {
+  element.removeAttribute("data-balloon");
+  element.removeAttribute("data-balloon-visible");
+  element.removeAttribute("data-balloon-pos");
 }

src/views/PasswordGenerator.vue

@@ -111,7 +111,7 @@ import RemoveAutoComplete from "../components/RemoveAutoComplete.vue";
 import MasterPassword from "../components/MasterPassword.vue";
 import InputSite from "../components/InputSite.vue";
 import Options from "../components/Options.vue";
-import { showTooltip } from "../services/tooltip";
+import { showTooltip, hideTooltip } from "../services/tooltip";
 import message from "../services/message";
 import Awesomplete from "awesomplete";
 import * as urlParser from "../services/url-parser";
@@ -223,10 +223,9 @@ export default {
     copyPassword() {
       const copied = copy(this.passwordGenerated);
       if (copied) {
-        showTooltip(
-          document.getElementById("copyPasswordButton"),
-          this.$t("Copied", "copied !")
-        );
+        const element = document.getElementById("copyPasswordButton");
+        showTooltip(element, this.$t("Copied", "copied !"));
+        setTimeout(() => hideTooltip(element), 2000);
       } else {
         message.warning(
           this.$t(
@@ -246,7 +245,7 @@ export default {
         showTooltip(
           document.getElementById("sharePasswordProfileButton"),
           copySuccessMessage,
-          "hint--top-left"
+          "left"
         );
       } else {
         message.warning(