diff --git a/package.json b/package.json
index 4a2e80a..2351da6 100644
--- a/package.json
+++ b/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",
diff --git a/resources/components/departures/departure.html b/resources/components/departures/departure.html
index 8e2b97e..91040f0 100644
--- a/resources/components/departures/departure.html
+++ b/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>
diff --git a/resources/components/favourites.html b/resources/components/favourites.html
index 75cc125..1c37382 100644
--- a/resources/components/favourites.html
+++ b/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>
diff --git a/resources/components/tooltip.html b/resources/components/tooltip.html
index 4e64c6c..e5ebf55 100644
--- a/resources/components/tooltip.html
+++ b/resources/components/tooltip.html
@@ -1,5 +1,7 @@
 <portal to="popups">
-    <popper class="popper--tooltip" arrow :reference="element" :placement="placement" v-if="show">
-        <slot />
-    </popper>
+    <transition name="fade">
+        <popper class="popper--tooltip" arrow :reference="element" :placement="placement" v-if="show" :responsive="false">
+            <slot />
+        </popper>
+    </transition>
 </portal>
diff --git a/resources/styles/_animations.scss b/resources/styles/_animations.scss
index 8fa563a..8dbe350 100644
--- a/resources/styles/_animations.scss
+++ b/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
   }
diff --git a/resources/ts/components/tooltip.ts b/resources/ts/components/tooltip.ts
index e78fd62..49755be 100644
--- a/resources/ts/components/tooltip.ts
+++ b/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('mouseleave', this._events['mouseleave'] = () => this.show = false);
+        this.$el.parentElement.addEventListener('mouseenter', this._events['mouseenter'] = () => {
+            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;
     }
diff --git a/resources/ts/components/utils.ts b/resources/ts/components/utils.ts
index 0dd293f..c81743e 100644
--- a/resources/ts/components/utils.ts
+++ b/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') })
diff --git a/templates/app.html.twig b/templates/app.html.twig
index 738114e..3bbd9c3 100644
--- a/templates/app.html.twig
+++ b/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>
diff --git a/yarn.lock b/yarn.lock
index 79c4d8d..2f3da73 100644
--- a/yarn.lock
+++ b/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"