Tooltip component now not responsible (but mobile friendly) & tooltips

package.json

@@ -46,6 +46,7 @@
     "mini-css-extract-plugin": "^0.4.2",
     "portal-vue": "^2.1.7",
     "vue-dragscroll": "^1.10.2",
+    "vue-removed-hook-mixin": "^0.1.1",
     "vue2-leaflet": "^1.0.2",
     "vuex": "^3.0.1",
     "vuex-class": "^0.3.1",

resources/components/departures/departure.html

@@ -29,7 +29,8 @@
 
             <div class="stop__actions flex-space-left">
                 <button class="btn btn-action" @click="showTrip = !showTrip">
-                    <fa :icon="['far', 'code-commit']" rotation="90" />
+                    <tooltip placement="top">pokaż/ukryj trasę</tooltip>
+                    <fa :icon="['far', 'code-commit']" />
                 </button>
             </div>
         </div>

resources/components/favourites.html

@@ -13,6 +13,7 @@
                 </div>
             </button>
             <button class="btn btn-action" @click="remove(favourite)">
+                <tooltip placement="left">usuń</tooltip>
                 <fa :icon="['fal', 'trash-alt']"></fa>
             </button>
         </li>

resources/components/tooltip.html

@@ -1,5 +1,7 @@
 <portal to="popups">
-    <popper class="popper--tooltip" arrow :reference="element" :placement="placement" v-if="show">
+    <transition name="fade">
-        <slot />
+        <popper class="popper--tooltip" arrow :reference="element" :placement="placement" v-if="show" :responsive="false">
-    </popper>
+            <slot />
+        </popper>
+    </transition>
 </portal>

resources/styles/_animations.scss

@@ -14,7 +14,7 @@
   }
 }
 
-@include vue-animation(fade, 250ms ease-in-out) {
+@include vue-animation(fade, 150ms ease-in-out) {
   0% {
     opacity: 0
   }

resources/ts/components/tooltip.ts

@@ -5,14 +5,23 @@ import { Prop } from "vue-property-decorator";
 @Component({ template: require('../../components/tooltip.html') })
 export class TooltipComponent extends Vue {
     @Prop({ type: String, default: "auto" }) public placement: string;
+    @Prop({ type: Number, default: 100 }) public delay: number;
+
     public show: boolean = false;
     public element: Element = null;
 
     private _events: { [event: string]: any };
+    private _timeout: number;
 
     mounted() {
-        this.$el.parentElement.addEventListener('mouseenter', this._events['mouseenter'] = () => this.show = true);
+        this.$el.parentElement.addEventListener('mouseenter', this._events['mouseenter'] = () => {
-        this.$el.parentElement.addEventListener('mouseleave', this._events['mouseleave'] = () => this.show = false);
+            this._timeout = window.setTimeout(() => { this.show = true }, this.delay);
+        });
+
+        this.$el.parentElement.addEventListener('mouseleave', this._events['mouseleave'] = () => {
+            window.clearTimeout(this._timeout);
+            this.show = false
+        });
 
         this.element = this.$el.parentElement;
     }

resources/ts/components/utils.ts

@@ -2,9 +2,11 @@ import Vue from 'vue';
 import { Component, Prop, Watch } from "vue-property-decorator";
 import Popper, { Placement } from "popper.js";
 import { Portal } from "portal-vue";
+import vueRemovedHookMixin from "vue-removed-hook-mixin";
 
 @Component({
-    template: require("../../components/popper.html")
+    template: require("../../components/popper.html"),
+    mixins: [ vueRemovedHookMixin ]
 })
 export class PopperComponent extends Vue {
     @Prop([ String, HTMLElement ])
@@ -19,6 +21,9 @@ export class PopperComponent extends Vue {
     @Prop(Boolean)
     public arrow: boolean;
 
+    @Prop({ type: Boolean, default: true })
+    public responsive: boolean;
+
     private _event;
     private _popper;
 
@@ -60,11 +65,11 @@ export class PopperComponent extends Vue {
             modifiers: {
                 arrow: { enabled: this.arrow, element: this.$refs['arrow'] as Element },
                 responsive: {
-                    enabled: true,
+                    enabled: this.responsive,
                     order: 890,
                     fn(data) {
                         if (window.innerWidth < 560) {
-                            data.instance.options.placement = 'bottom';
+                            data.instance.options.placement = 'top';
                             data.styles.transform = `translate3d(0, ${data.offsets.popper.top}px, 0)`;
                             data.styles.right = '0';
                             data.styles.left = '0';
@@ -95,9 +100,12 @@ export class PopperComponent extends Vue {
     }
 
     beforeDestroy() {
-        this._popper.destroy();
         this._event && document.removeEventListener('click', this._event, { capture: true });
     }
+
+    removed() {
+        this._popper.destroy();
+    }
 }
 
 @Component({ template: require('../../components/fold.html') })

templates/app.html.twig

@@ -86,6 +86,7 @@
                         <span class="text">Przystanki</span>
                     </h2>
                     <button class="btn btn-action flex-space-left" @click="clear">
+                        <tooltip placement="top">usuń wszystkie</tooltip>
                         <fa :icon="['fal', 'trash-alt']" fixed-width></fa>
                     </button>
                 </header>
@@ -118,6 +119,7 @@
                             Wybierz przystanki
                         </h2>
                         <button class="btn btn-action" @click="visibility.picker = 'favourites'">
+                            <tooltip placement="top">Zapisane</tooltip>
                             <fa :icon="['fal', 'star']" fixed-witdth></fa>
                         </button>
                     </template>
@@ -127,6 +129,7 @@
                             Zapisane
                         </h2>
                         <button class="btn btn-action" @click="visibility.picker = 'search'">
+                            <tooltip placement="top">Wybierz przystanki</tooltip>
                             <fa :icon="['fal', 'search']" fixed-witdth></fa>
                         </button>
                     </template>

yarn.lock

@@ -6460,6 +6460,11 @@ vue-property-decorator@^7.0.0:
   dependencies:
     vue-class-component "^6.2.0"
 
+vue-removed-hook-mixin@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/vue-removed-hook-mixin/-/vue-removed-hook-mixin-0.1.1.tgz#df2e939c87d8ecf1707f0b3b3a21def81dedbaf5"
+  integrity sha512-ElO0fn1QT25S7WVHUS7rSug7qBHwR/OPxBTdaH2+DdMz0A/lyw3H40c/Q08k2xvndmx7tAglsevcTk2DgKPsvw==
+
 vue2-leaflet@^1.0.2:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/vue2-leaflet/-/vue2-leaflet-1.2.3.tgz#00ddeb9db4fb9a5e3b8f9c09cd97a4734366415e"