fixed popover & tooltip positioning

wffranco · Dec 22, 2016 · 12f01c9 · 12f01c9
1 parent 5d3688a
commit 12f01c9
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 27 deletions.
diff --git a/src/Tooltip.vue b/src/Tooltip.vue
@@ -2,7 +2,7 @@
   <span ref="trigger">
     <slot></slot>
     <transition :name="effect">
-      <div ref="popover" v-if="show" style="display:block;" :class="['tooltip',placement]">
+      <div ref="popover" v-if="show" :class="['tooltip',placement]">
         <div class="tooltip-arrow"></div>
         <div class="tooltip-inner">
           <slot name="content"><div v-html="content"></div></slot>
@@ -29,7 +29,7 @@ export default {
 .tooltip.left,
 .tooltip.right,
 .tooltip.bottom {
-  opacity: .9
+  opacity: .9;
 }
 .fadein-enter {
   animation:fadein-in 0.3s ease-in;

diff --git a/src/utils/popoverMixins.js b/src/utils/popoverMixins.js
@@ -11,43 +11,51 @@ export default {
   },
   data () {
     return {
-      position: {
-        top: 0,
-        left: 0
-      },
+      top: 0,
+      left: 0,
       show: false
     }
   },
+  computed: {
+    events () { return { contextmenu: ['contextmenu'], hover: ['mouseleave', 'mouseenter'], focus: ['blur', 'focus'] }[this.trigger] || ['click'] }
+  },
   methods: {
-    toggle (e) {
-      if (e && this.trigger === 'contextmenu') e.preventDefault()
-      if (!(this.show = !this.show)) { return }
+    beforeEnter () {
+      this.position()
+      setTimeout(() => this.position(), 30)
+    },
+    position () {
       this.$nextTick(() => {
-        const popover = this.$refs.popover
-        const trigger = this.$refs.trigger.children[0]
+        var popover = this.$refs.popover
+        var trigger = this.$refs.trigger.children[0]
         switch (this.placement) {
           case 'top' :
-            this.position.left = trigger.offsetLeft - popover.offsetWidth / 2 + trigger.offsetWidth / 2
-            this.position.top = trigger.offsetTop - popover.offsetHeight
+            this.left = trigger.offsetLeft - popover.offsetWidth / 2 + trigger.offsetWidth / 2
+            this.top = trigger.offsetTop - popover.offsetHeight
             break
           case 'left':
-            this.position.left = trigger.offsetLeft - popover.offsetWidth
-            this.position.top = trigger.offsetTop + trigger.offsetHeight / 2 - popover.offsetHeight / 2
+            this.left = trigger.offsetLeft - popover.offsetWidth
+            this.top = trigger.offsetTop + trigger.offsetHeight / 2 - popover.offsetHeight / 2
             break
           case 'right':
-            this.position.left = trigger.offsetLeft + trigger.offsetWidth
-            this.position.top = trigger.offsetTop + trigger.offsetHeight / 2 - popover.offsetHeight / 2
+            this.left = trigger.offsetLeft + trigger.offsetWidth
+            this.top = trigger.offsetTop + trigger.offsetHeight / 2 - popover.offsetHeight / 2
             break
           case 'bottom':
-            this.position.left = trigger.offsetLeft - popover.offsetWidth / 2 + trigger.offsetWidth / 2
-            this.position.top = trigger.offsetTop + trigger.offsetHeight
+            this.left = trigger.offsetLeft - popover.offsetWidth / 2 + trigger.offsetWidth / 2
+            this.top = trigger.offsetTop + trigger.offsetHeight
             break
           default:
             console.warn('Wrong placement prop')
         }
-        popover.style.top = this.position.top + 'px'
-        popover.style.left = this.position.left + 'px'
+        popover.style.top = this.top + 'px'
+        popover.style.left = this.left + 'px'
       })
+    },
+    toggle (e) {
+      if (e && this.trigger === 'contextmenu') e.preventDefault()
+      this.show = !this.show
+      if (this.show) this.beforeEnter()
     }
   },
   mounted () {
@@ -56,13 +64,11 @@ export default {
 
     if (this.trigger === 'focus' && !~trigger.tabIndex) {
       trigger = $('a,input,select,textarea,button', trigger)
-      if (!trigger.length) { trigger = null }
-    }
-    if (trigger) {
-      let events = { contextmenu: 'contextmenu', hover: 'mouseleave mouseenter', focus: 'blur focus' }
-      $(trigger).on(events[this.trigger] || 'click', this.toggle)
-      this._trigger = trigger
+      if (!trigger.length) { return }
     }
+    this.events.forEach(event => {
+      $(trigger).on(event, this.toggle)
+    })
   },
   beforeDestroy () {
     if (this._trigger) $(this._trigger).off()