Tool tip update

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-strap",
-  "version": "2.0.2",
+  "version": "2.0.6",
   "description": "Bootstrap components built with Vue.js",
   "main": "dist/vue-strap.js",
   "typings": "types/index.d.ts",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "bootstrap": "^3.3.7",
-    "vue": "^2.1.0",
+    "vue": "^2.6.10",
     "vue-template-compiler": "^2.1.0",
     "vue-resource": "^1.0.3"
   },

src/Input.vue

@@ -17,9 +17,10 @@
         :rows="rows"
         :step="step"
         :title="attr(title)"
+        :autofocus="autofocus"
         :type="type=='textarea'?null:type"
-        v-model="val"
-        @blur="emit" @focus="emit" @input="emit"
+        :value="val" @input="emit"
+        @blur="emit" @focus="emit" 
         @keyup.enter="type!='textarea'&&enterSubmit&&submit()"
       ></textarea>
       <div v-if="clearButton && value" :class="{icon:icon}">
@@ -45,9 +46,10 @@
         :rows="rows"
         :step="step"
         :title="attr(title)"
+        :autofocus="autofocus"
         :type="type=='textarea'?null:type"
-        v-model="val"
-        @blur="emit" @focus="emit" @input="emit"
+        :value="val" @input="emit"
+        @blur="emit" @focus="emit"
         @keyup.enter="type!='textarea'&&enterSubmit&&submit()"
       ></textarea>
       <span v-if="clearButton && val" class="close" @click="val = ''">&times;</span>
@@ -73,6 +75,7 @@ export default {
     cols: {type: Number, default: null},
     datalist: {type: Array, default: null},
     disabled: {type: Boolean, default: false},
+    autofocus: {type: Boolean, default: false},
     enterSubmit: {type: Boolean, default: false},
     error: {type: String, default: null},
     help: {type: String, default: null},
@@ -190,7 +193,9 @@ export default {
         }, this.validationDelay)
       }
     },
-    focus () { this.input.focus() },
+    focus () { 
+      setTimeout(()=>this.$refs.input && this.$refs.input.focus(), 100)
+    },
     submit () {
       if (this.$parent._formValidator) {
         return this.$parent.validate()

src/Tooltip.vue

@@ -2,7 +2,7 @@
   <span ref="trigger">
     <slot></slot>
     <transition :name="effect">
-      <div ref="popover" v-if="show" :class="['tooltip',placement]">
+      <div ref="popover" v-show="show" :class="['tooltip',placement]">
         <div class="tooltip-arrow"></div>
         <div class="tooltip-inner">
           <slot name="content"><div v-html="content"></div></slot>
@@ -18,7 +18,7 @@ import PopoverMixin from './utils/popoverMixins.js'
 export default {
   mixins: [PopoverMixin],
   props: {
-    effect: {type: String, default: 'scale'},
+    effect: {type: String, default: 'fadein'},
     trigger: {type: String, default: 'hover'}
   }
 }
@@ -31,11 +31,23 @@ export default {
 .tooltip.bottom {
   opacity: .9;
 }
+.tooltip {
+  animation:fadein-in .4s ease-in;
+}
+.tooltip-inner {
+  background-color: #000;
+  color: #fff;
+  max-width: 200px;
+  padding: 15px 18px 14px;
+  text-align: center;
+  font-size: 13px;
+  -webkit-border-radius: 4px;
+}
 .fadein-enter {
-  animation:fadein-in 0.3s ease-in;
+  animation:fadein-in 0.4s ease-in;
 }
 .fadein-leave-active {
-  animation:fadein-out 0.3s ease-out;
+  animation:fadein-out 0.4s ease-out;
 }
 @keyframes fadein-in {
   0% {

src/utils/popoverMixins.js

@@ -1,5 +1,10 @@
 import $ from './NodeList.js'
-
+function windowPos(element) {
+  // const win = typeof window === 'undefined' ? {scrollY:0, scrollX:0} : window;
+  var top = element.getBoundingClientRect().top //+ (win.scrollY || win.pageYOffset);
+  var left = element.getBoundingClientRect().left //+ (win.scrollX || win.pageXOffset);
+  return {top, left}
+}
 export default {
   props: {
     content: {type: String},
@@ -28,22 +33,28 @@ export default {
       this.$nextTick(() => {
         var popover = this.$refs.popover
         var trigger = this.$refs.trigger.children[0]
+
+        if (!popover || !trigger) return;
+        if (popover.style.position!=='fixed') { popover.style.position = 'fixed'; document.body.appendChild(popover) }
+
+        const p = windowPos(trigger)
+
         switch (this.placement) {
           case 'top' :
-            this.left = trigger.offsetLeft - popover.offsetWidth / 2 + trigger.offsetWidth / 2
-            this.top = trigger.offsetTop - popover.offsetHeight
+            this.left = p.left - popover.offsetWidth / 2 + trigger.offsetWidth / 2
+            this.top = p.top - popover.offsetHeight
             break
           case 'left':
-            this.left = trigger.offsetLeft - popover.offsetWidth
-            this.top = trigger.offsetTop + trigger.offsetHeight / 2 - popover.offsetHeight / 2
+            this.left = p.left - popover.offsetWidth
+            this.top = p.top + trigger.offsetHeight / 2 - popover.offsetHeight / 2
             break
           case 'right':
-            this.left = trigger.offsetLeft + trigger.offsetWidth
-            this.top = trigger.offsetTop + trigger.offsetHeight / 2 - popover.offsetHeight / 2
+            this.left = p.left + trigger.offsetWidth
+            this.top = p.top + trigger.offsetHeight / 2 - popover.offsetHeight / 2
             break
           case 'bottom':
-            this.left = trigger.offsetLeft - popover.offsetWidth / 2 + trigger.offsetWidth / 2
-            this.top = trigger.offsetTop + trigger.offsetHeight
+            this.left = p.left - popover.offsetWidth / 2 + trigger.offsetWidth / 2
+            this.top = p.top + trigger.offsetHeight
             break
           default:
             console.warn('Wrong placement prop')
@@ -71,6 +82,9 @@ export default {
     })
   },
   beforeDestroy () {
+    var popover = this.$refs.popover
+    if (popover) popover.remove();
+
     if (this._trigger) $(this._trigger).off()
   }
 }