Fix issue when starting opened and fixed tooltips set to true (#30)

PygmySlowLoris · Oct 27, 2018 · 8e466ec · 8e466ec
1 parent 75d7f50
commit 8e466ec
Showing 1 changed file with 20 additions and 15 deletions.
diff --git a/src/FAB.vue b/src/FAB.vue
@@ -11,6 +11,7 @@
                         <transition
                                 enter-active-class="animated quick zoomIn"
                                 leave-active-class="animated quick zoomOut"
+                                v-on:after-enter="afterActionsTransitionEnter"
                         >
                             <template v-if="action.tooltip">
                                 <li v-if="toggle" :style="{ 'background-color': action.color || bgColor }"
@@ -116,6 +117,9 @@
             fixedTooltip: {
                 default: false
             },
+            tooltipTimeOutWhenStartOpened: {
+                default: 200
+            },
             enableRotation:{
                 default: true
             },
@@ -276,19 +280,19 @@
                     wrapper.insertBefore(el, wrapper.childNodes[0]);
                 }
             },
-            showTooltip(show) {
-                if (show && this.actions.length && this.fixedTooltip) {
-
-                    //timeout to prevent wrong position for the tooltip
-                    setTimeout(() => {
-                        this.$refs.actions.forEach((item) => {
-                            if(this.toggle) {
-                                item._tooltip.show();
-                            }
-                        });
-                    },700);
-
+            showTooltip(timeOut = 0) {
+                if (this.toggle && this.actions.length && this.fixedTooltip) {
+                  setTimeout(() => {
+                    this.$refs.actions.forEach((item) => {
+                      if(this.toggle) {
+                        item._tooltip.show();
+                      }
+                    });
+                  },timeOut);
                 }
+            },
+            afterActionsTransitionEnter() {
+                this.showTooltip();
             }
         },
         watch: {
@@ -299,16 +303,17 @@
                     this.moveTransition();
                     this.tooltipPos();
                 });
-            },
-            toggle(val) {
-                this.showTooltip(val);
             }
         },
         mounted() {
             this.moveTransition();
         },
         created() {
             this.setPosition();
+
+            if (this.startOpened) {
+                this.showTooltip(this.tooltipTimeOutWhenStartOpened);
+            }
         }
     }
 </script>