Merge remote-tracking branch 'origin/master' into components/mdDialog

* origin/master:
  Improve tooltip styling
  Improve tooltip styling
  Force remove of all tooltips
  Fix inputs not being themable
  Fix typo
  [release] 0.3.3
  [build] 0.3.3
  Fix regression on inputs getting wrong value after manual update #101 #100 #96

dist/components/mdInputContainer/index.debug.js

@@ -422,8 +422,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	    placeholder: String
 	  },
 	  watch: {
-	    value: function value() {
-	      this.setParentValue();
+	    value: function value(_value) {
+	      this.setParentValue(_value);
 	    },
 	    disabled: function disabled() {
 	      this.setParentDisabled();
@@ -443,8 +443,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	      this.parentContainer.enableCounter = this.maxlength > 0;
 	      this.parentContainer.counterLength = this.maxlength;
 	    },
-	    setParentValue: function setParentValue() {
-	      this.parentContainer.setValue(this.value);
+	    setParentValue: function setParentValue(value) {
+	      this.parentContainer.setValue(value || this.$el.value);
 	    },
 	    setParentDisabled: function setParentDisabled() {
 	      this.parentContainer.isDisabled = this.disabled;
@@ -463,10 +463,12 @@ return /******/ (function(modules) { // webpackBootstrap
 	      this.setParentValue();
 	    },
 	    onInput: function onInput() {
+	      var value = this.$el.value;
+	
 	      this.setParentValue();
-	      this.parentContainer.inputLength = this.value ? this.value.length : 0;
-	      this.$emit('change', this.value);
-	      this.$emit('input', this.value);
+	      this.parentContainer.inputLength = value ? value.length : 0;
+	      this.$emit('change', value);
+	      this.$emit('input', value);
 	    }
 	  }
 	};

dist/components/mdInputContainer/index.js

@@ -1,4 +1,4 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueMaterial=e():t.VueMaterial=e()}(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var o=n[i]={exports:{},id:i,loaded:!1};return t[i].call(o.exports,o,o.exports,e),o.loaded=!0,o.exports}var n={};return e.m=t,e.c=n,e.p="/",e(0)}({0:function(t,e,n){t.exports=n(15)},1:function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=function t(e,n){return!!e.$el&&(0!==e._uid&&(e.$el.classList.contains(n)?e:t(e.$parent,n)))};e.default=n,t.exports=e.default},3:function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=function(t){return t&&t.constructor===Array};e.default=n,t.exports=e.default},5:function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{value:[String,Number],disabled:Boolean,required:Boolean,maxlength:[Number,String],placeholder:String},watch:{value:function(){this.setParentValue()},disabled:function(){this.setParentDisabled()},required:function(){this.setParentRequired()},placeholder:function(){this.setParentPlaceholder()},maxlength:function(){this.handleMaxLength()}},methods:{handleMaxLength:function(){this.parentContainer.enableCounter=this.maxlength>0,this.parentContainer.counterLength=this.maxlength},setParentValue:function(){this.parentContainer.setValue(this.value)},setParentDisabled:function(){this.parentContainer.isDisabled=this.disabled},setParentRequired:function(){this.parentContainer.isRequired=this.required},setParentPlaceholder:function(){this.parentContainer.hasPlaceholder=!!this.placeholder},onFocus:function(){this.parentContainer.isFocused=!0},onBlur:function(){this.parentContainer.isFocused=!1,this.setParentValue()},onInput:function(){this.setParentValue(),this.parentContainer.inputLength=this.value?this.value.length:0,this.$emit("change",this.value),this.$emit("input",this.value)}}},t.exports=e.default},6:function(t,e,n){var i,o,r;/*!
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueMaterial=e():t.VueMaterial=e()}(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var o=n[i]={exports:{},id:i,loaded:!1};return t[i].call(o.exports,o,o.exports,e),o.loaded=!0,o.exports}var n={};return e.m=t,e.c=n,e.p="/",e(0)}({0:function(t,e,n){t.exports=n(15)},1:function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=function t(e,n){return!!e.$el&&(0!==e._uid&&(e.$el.classList.contains(n)?e:t(e.$parent,n)))};e.default=n,t.exports=e.default},3:function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=function(t){return t&&t.constructor===Array};e.default=n,t.exports=e.default},5:function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{value:[String,Number],disabled:Boolean,required:Boolean,maxlength:[Number,String],placeholder:String},watch:{value:function(t){this.setParentValue(t)},disabled:function(){this.setParentDisabled()},required:function(){this.setParentRequired()},placeholder:function(){this.setParentPlaceholder()},maxlength:function(){this.handleMaxLength()}},methods:{handleMaxLength:function(){this.parentContainer.enableCounter=this.maxlength>0,this.parentContainer.counterLength=this.maxlength},setParentValue:function(t){this.parentContainer.setValue(t||this.$el.value)},setParentDisabled:function(){this.parentContainer.isDisabled=this.disabled},setParentRequired:function(){this.parentContainer.isRequired=this.required},setParentPlaceholder:function(){this.parentContainer.hasPlaceholder=!!this.placeholder},onFocus:function(){this.parentContainer.isFocused=!0},onBlur:function(){this.parentContainer.isFocused=!1,this.setParentValue()},onInput:function(){var t=this.$el.value;this.setParentValue(),this.parentContainer.inputLength=t?t.length:0,this.$emit("change",t),this.$emit("input",t)}}},t.exports=e.default},6:function(t,e,n){var i,o,r;/*!
 		Autosize 3.0.18
 		license: MIT
 		http://www.jacklmoore.com/autosize

dist/docs/index.html

@@ -1 +1 @@
-<!DOCTYPE html><html lang=en-us><meta charset=utf-8><meta http-equiv=cleartype content=on><meta name=viewport content="width=device-width,initial-scale=1,minimal-ui"><meta name=mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=black><meta name=apple-mobile-web-app-title content="Vue Material"><meta name=application-name content="Vue Material"><meta name=description content="Material Design for Vue"><meta name=msapplication-config content=assets/favicon/browserconfig.xml><meta name=theme-color content=#2196f3><link rel=apple-touch-icon sizes=180x180 href=assets/favicon/apple-touch-icon.png><link rel=icon type=image/png href=assets/favicon/favicon-32x32.png sizes=32x32><link rel=icon type=image/png href=assets/favicon/favicon-194x194.png sizes=194x194><link rel=icon type=image/png href=assets/favicon/android-chrome-192x192.png sizes=192x192><link rel=icon type=image/png href=assets/favicon/favicon-16x16.png sizes=16x16><link rel=manifest href=assets/favicon/manifest.json><link rel=mask-icon href=assets/favicon/safari-pinned-tab.svg color=#2196f3><link rel="shortcut icon" href=assets/favicon/favicon.ico><title>Vue Material</title><link rel=stylesheet href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"><link rel=stylesheet href="//fonts.googleapis.com/icon?family=Material+Icons"><link href=docs.63f568a6.css rel=stylesheet><body class=md-scrollbar><div id=app v-cloak><docs></docs></div><script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-85823257-1","auto"),ga("send","pageview")</script><script src=manifest.143c6ca3.js></script><script src=vendor.2044b105.js></script><script src=docs.320568d8.js></script>
+<!DOCTYPE html><html lang=en-us><meta charset=utf-8><meta http-equiv=cleartype content=on><meta name=viewport content="width=device-width,initial-scale=1,minimal-ui"><meta name=mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=black><meta name=apple-mobile-web-app-title content="Vue Material"><meta name=application-name content="Vue Material"><meta name=description content="Material Design for Vue"><meta name=msapplication-config content=assets/favicon/browserconfig.xml><meta name=theme-color content=#2196f3><link rel=apple-touch-icon sizes=180x180 href=assets/favicon/apple-touch-icon.png><link rel=icon type=image/png href=assets/favicon/favicon-32x32.png sizes=32x32><link rel=icon type=image/png href=assets/favicon/favicon-194x194.png sizes=194x194><link rel=icon type=image/png href=assets/favicon/android-chrome-192x192.png sizes=192x192><link rel=icon type=image/png href=assets/favicon/favicon-16x16.png sizes=16x16><link rel=manifest href=assets/favicon/manifest.json><link rel=mask-icon href=assets/favicon/safari-pinned-tab.svg color=#2196f3><link rel="shortcut icon" href=assets/favicon/favicon.ico><title>Vue Material</title><link rel=stylesheet href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"><link rel=stylesheet href="//fonts.googleapis.com/icon?family=Material+Icons"><link href=docs.63f568a6.css rel=stylesheet><body class=md-scrollbar><div id=app v-cloak><docs></docs></div><script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-85823257-1","auto"),ga("send","pageview")</script><script src=manifest.90758caf.js></script><script src=vendor.2044b105.js></script><script src=docs.bb32f733.js></script>

dist/docs/manifest.90758caf.js

@@ -1 +1 @@
-!function(e){function t(n){if(r[n])return r[n].exports;var a=r[n]={exports:{},id:n,loaded:!1};return e[n].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var n=window.webpackJsonp;window.webpackJsonp=function(o,p){for(var l,c,s=0,i=[];s<o.length;s++)c=o[s],a[c]&&i.push.apply(i,a[c]),a[c]=0;for(l in p)e[l]=p[l];for(n&&n(o,p);i.length;)i.shift().call(null,t);if(p[0])return r[0]=0,t(0)};var r={},a={0:0,2:0};t.e=function(e,n){if(0===a[e])return n.call(null,t);if(void 0!==a[e])a[e].push(n);else{a[e]=[n];var r=document.getElementsByTagName("head")[0],o=document.createElement("script");o.type="text/javascript",o.charset="utf-8",o.async=!0,o.src=t.p+""+e+"."+{1:"320568d8",2:"2044b105"}[e]+".js",r.appendChild(o)}},t.m=e,t.c=r,t.p=""}([]);
+!function(e){function t(n){if(r[n])return r[n].exports;var a=r[n]={exports:{},id:n,loaded:!1};return e[n].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var n=window.webpackJsonp;window.webpackJsonp=function(o,p){for(var l,c,s=0,i=[];s<o.length;s++)c=o[s],a[c]&&i.push.apply(i,a[c]),a[c]=0;for(l in p)e[l]=p[l];for(n&&n(o,p);i.length;)i.shift().call(null,t);if(p[0])return r[0]=0,t(0)};var r={},a={0:0,2:0};t.e=function(e,n){if(0===a[e])return n.call(null,t);if(void 0!==a[e])a[e].push(n);else{a[e]=[n];var r=document.getElementsByTagName("head")[0],o=document.createElement("script");o.type="text/javascript",o.charset="utf-8",o.async=!0,o.src=t.p+""+e+"."+{1:"bb32f733",2:"2044b105"}[e]+".js",r.appendChild(o)}},t.m=e,t.c=r,t.p=""}([]);

dist/vue-material.debug.js

@@ -3653,8 +3653,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	    placeholder: String
 	  },
 	  watch: {
-	    value: function value() {
-	      this.setParentValue();
+	    value: function value(_value) {
+	      this.setParentValue(_value);
 	    },
 	    disabled: function disabled() {
 	      this.setParentDisabled();
@@ -3674,8 +3674,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	      this.parentContainer.enableCounter = this.maxlength > 0;
 	      this.parentContainer.counterLength = this.maxlength;
 	    },
-	    setParentValue: function setParentValue() {
-	      this.parentContainer.setValue(this.value);
+	    setParentValue: function setParentValue(value) {
+	      this.parentContainer.setValue(value || this.$el.value);
 	    },
 	    setParentDisabled: function setParentDisabled() {
 	      this.parentContainer.isDisabled = this.disabled;
@@ -3694,10 +3694,12 @@ return /******/ (function(modules) { // webpackBootstrap
 	      this.setParentValue();
 	    },
 	    onInput: function onInput() {
+	      var value = this.$el.value;
+	
 	      this.setParentValue();
-	      this.parentContainer.inputLength = this.value ? this.value.length : 0;
-	      this.$emit('change', this.value);
-	      this.$emit('input', this.value);
+	      this.parentContainer.inputLength = value ? value.length : 0;
+	      this.$emit('change', value);
+	      this.$emit('input', value);
 	    }
 	  }
 	};

dist/vue-material.js

@@ -1,4 +1,4 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueMaterial=e():t.VueMaterial=e()}(this,function(){return function(t){function e(o){if(n[o])return n[o].exports;var i=n[o]={exports:{},id:o,loaded:!1};return t[o].call(i.exports,i,i.exports,e),i.loaded=!0,i.exports}var n={};return e.m=t,e.c=n,e.p="/",e(0)}([function(t,e,n){t.exports=n(206)},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=function t(e,n){return!!e.$el&&(0!==e._uid&&(e.$el.classList.contains(n)?e:t(e.$parent,n)))};e.default=n,t.exports=e.default},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=8,o=function(t,e){return e.top<=n-parseInt(getComputedStyle(t).marginTop,10)},i=function(t,e){return e.top+t.offsetHeight+n>=window.innerHeight-parseInt(getComputedStyle(t).marginTop,10)},d=function(t,e){return e.left<=n-parseInt(getComputedStyle(t).marginLeft,10)},a=function(t,e){return e.left+t.offsetWidth+n>=window.innerWidth-parseInt(getComputedStyle(t).marginLeft,10)},r=function(t,e){var r=getComputedStyle(t);return o(t,e)&&(e.top=n-parseInt(r.marginTop,10)),d(t,e)&&(e.left=n-parseInt(r.marginLeft,10)),a(t,e)&&(e.left=window.innerWidth-n-t.offsetWidth-parseInt(r.marginLeft,10)),i(t,e)&&(e.top=window.innerHeight-n-t.offsetHeight-parseInt(r.marginTop,10)),e};e.default=r,t.exports=e.default},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=function(t){return t&&t.constructor===Array};e.default=n,t.exports=e.default},function(t,e){"use strict";function n(){var t=document.createElement("span"),e={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(var n in e)if(void 0!==t.style[n])return e[n]}Object.defineProperty(e,"__esModule",{value:!0}),e.default=n(),t.exports=e.default},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{value:[String,Number],disabled:Boolean,required:Boolean,maxlength:[Number,String],placeholder:String},watch:{value:function(){this.setParentValue()},disabled:function(){this.setParentDisabled()},required:function(){this.setParentRequired()},placeholder:function(){this.setParentPlaceholder()},maxlength:function(){this.handleMaxLength()}},methods:{handleMaxLength:function(){this.parentContainer.enableCounter=this.maxlength>0,this.parentContainer.counterLength=this.maxlength},setParentValue:function(){this.parentContainer.setValue(this.value)},setParentDisabled:function(){this.parentContainer.isDisabled=this.disabled},setParentRequired:function(){this.parentContainer.isRequired=this.required},setParentPlaceholder:function(){this.parentContainer.hasPlaceholder=!!this.placeholder},onFocus:function(){this.parentContainer.isFocused=!0},onBlur:function(){this.parentContainer.isFocused=!1,this.setParentValue()},onInput:function(){this.setParentValue(),this.parentContainer.inputLength=this.value?this.value.length:0,this.$emit("change",this.value),this.$emit("input",this.value)}}},t.exports=e.default},function(t,e,n){var o,i,d;/*!
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueMaterial=e():t.VueMaterial=e()}(this,function(){return function(t){function e(o){if(n[o])return n[o].exports;var i=n[o]={exports:{},id:o,loaded:!1};return t[o].call(i.exports,i,i.exports,e),i.loaded=!0,i.exports}var n={};return e.m=t,e.c=n,e.p="/",e(0)}([function(t,e,n){t.exports=n(206)},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=function t(e,n){return!!e.$el&&(0!==e._uid&&(e.$el.classList.contains(n)?e:t(e.$parent,n)))};e.default=n,t.exports=e.default},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=8,o=function(t,e){return e.top<=n-parseInt(getComputedStyle(t).marginTop,10)},i=function(t,e){return e.top+t.offsetHeight+n>=window.innerHeight-parseInt(getComputedStyle(t).marginTop,10)},d=function(t,e){return e.left<=n-parseInt(getComputedStyle(t).marginLeft,10)},a=function(t,e){return e.left+t.offsetWidth+n>=window.innerWidth-parseInt(getComputedStyle(t).marginLeft,10)},r=function(t,e){var r=getComputedStyle(t);return o(t,e)&&(e.top=n-parseInt(r.marginTop,10)),d(t,e)&&(e.left=n-parseInt(r.marginLeft,10)),a(t,e)&&(e.left=window.innerWidth-n-t.offsetWidth-parseInt(r.marginLeft,10)),i(t,e)&&(e.top=window.innerHeight-n-t.offsetHeight-parseInt(r.marginTop,10)),e};e.default=r,t.exports=e.default},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=function(t){return t&&t.constructor===Array};e.default=n,t.exports=e.default},function(t,e){"use strict";function n(){var t=document.createElement("span"),e={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(var n in e)if(void 0!==t.style[n])return e[n]}Object.defineProperty(e,"__esModule",{value:!0}),e.default=n(),t.exports=e.default},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{value:[String,Number],disabled:Boolean,required:Boolean,maxlength:[Number,String],placeholder:String},watch:{value:function(t){this.setParentValue(t)},disabled:function(){this.setParentDisabled()},required:function(){this.setParentRequired()},placeholder:function(){this.setParentPlaceholder()},maxlength:function(){this.handleMaxLength()}},methods:{handleMaxLength:function(){this.parentContainer.enableCounter=this.maxlength>0,this.parentContainer.counterLength=this.maxlength},setParentValue:function(t){this.parentContainer.setValue(t||this.$el.value)},setParentDisabled:function(){this.parentContainer.isDisabled=this.disabled},setParentRequired:function(){this.parentContainer.isRequired=this.required},setParentPlaceholder:function(){this.parentContainer.hasPlaceholder=!!this.placeholder},onFocus:function(){this.parentContainer.isFocused=!0},onBlur:function(){this.parentContainer.isFocused=!1,this.setParentValue()},onInput:function(){var t=this.$el.value;this.setParentValue(),this.parentContainer.inputLength=t?t.length:0,this.$emit("change",t),this.$emit("input",t)}}},t.exports=e.default},function(t,e,n){var o,i,d;/*!
 		Autosize 3.0.18
 		license: MIT
 		http://www.jacklmoore.com/autosize

docs/src/pages/Changelog.vue

@@ -2,6 +2,14 @@
   <single-page class="single-page-home" label="Changelog">
     <single-page-banner label="Changelog"></single-page-banner>
 
+    <section>
+      <h2 class="md-headline">v0.3.3 - Bugfixes</h2>
+      <h3 class="md-title">Fixes:</h3>
+      <ul>
+        <li>Fix regression on inputs getting wrong value after manual update <strong><a href="https://github.com/marcosmoura/vue-material/issues/101" target="_blank" rel="noopener">#101</a> <strong><a href="https://github.com/marcosmoura/vue-material/issues/100" target="_blank" rel="noopener">#100</a> <strong><a href="https://github.com/marcosmoura/vue-material/issues/96" target="_blank" rel="noopener">#96</a></li>
+      </ul>
+    </section>
+
     <section>
       <h2 class="md-headline">v0.3.2 - Bugfixes</h2>
       <h3 class="md-title">Fixes:</h3>

docs/src/pages/components/Input.vue

@@ -93,15 +93,19 @@
 
       <demo-example label="Themed" size="4">
         <form novalidate @submit.stop.prevent="submit">
-          <md-input-container v-md-theme="'green'">
-            <label>Themable - Input</label>
-            <md-input></md-input>
-          </md-input-container>
+          <div v-md-theme="'green'">
+            <md-input-container>
+              <label>Green - Input</label>
+              <md-input></md-input>
+            </md-input-container>
+          </div>
 
-          <md-input-container v-md-theme="'brown'">
-            <label>Themable - Textarea</label>
-            <md-textarea></md-textarea>
-          </md-input-container>
+          <div v-md-theme="'cyan'">
+            <md-input-container>
+              <label>Cyan - Textarea</label>
+              <md-textarea></md-textarea>
+            </md-input-container>
+          </div>
         </form>
       </demo-example>
     </div>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-material",
   "description": "Material Design for Vue.js",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "author": "Marcos Moura <marcosvmmoura@gmail.com>",
   "homepage": "https://marcosmoura.github.io/vue-material",
   "license": "MIT",

src/components/mdAvatar/mdAvatar.scss

@@ -60,22 +60,22 @@ $avatar-large-icon: 40px;
       animation-duration: .9s;
     }
   }
+}
 
-  .md-tooltip {
-    &.md-tooltip-top {
-      margin-top: -8px;
-    }
+.md-avatar-tooltip {
+  &.md-tooltip-top {
+    margin-top: -8px;
+  }
 
-    &.md-tooltip-right {
-      margin-left: 8px;
-    }
+  &.md-tooltip-right {
+    margin-left: 8px;
+  }
 
-    &.md-tooltip-bottom {
-      margin-top: 8px;
-    }
+  &.md-tooltip-bottom {
+    margin-top: 8px;
+  }
 
-    &.md-tooltip-left {
-      margin-left: -8px;
-    }
+  &.md-tooltip-left {
+    margin-left: -8px;
   }
 }

src/components/mdButton/mdButton.scss

@@ -43,7 +43,7 @@ $button-icon-size: 40px;
   &:focus {
     outline: none;
   }
-  
+
   &::-moz-focus-inner {
     border:0;
   }
@@ -110,24 +110,6 @@ $button-icon-size: 40px;
       line-height: $button-dense-height;
     }
 
-    .md-tooltip {
-      &.md-tooltip-top {
-        margin-top: -8px;
-      }
-
-      &.md-tooltip-right {
-        margin-left: 8px;
-      }
-
-      &.md-tooltip-bottom {
-        margin-top: 8px;
-      }
-
-      &.md-tooltip-left {
-        margin-left: -8px;
-      }
-    }
-
     .md-ink-ripple {
       border-radius: 50%;
 
@@ -257,3 +239,21 @@ $button-icon-size: 40px;
     display: block;
   }
 }
+
+.md-button-tooltip {
+  &.md-tooltip-top {
+    margin-top: -8px;
+  }
+
+  &.md-tooltip-right {
+    margin-left: 8px;
+  }
+
+  &.md-tooltip-bottom {
+    margin-top: 8px;
+  }
+
+  &.md-tooltip-left {
+    margin-left: -8px;
+  }
+}

src/components/mdInputContainer/common.js

@@ -7,8 +7,8 @@ export default {
     placeholder: String
   },
   watch: {
-    value() {
-      this.setParentValue();
+    value(value) {
+      this.setParentValue(value);
     },
     disabled() {
       this.setParentDisabled();
@@ -28,8 +28,8 @@ export default {
       this.parentContainer.enableCounter = this.maxlength > 0;
       this.parentContainer.counterLength = this.maxlength;
     },
-    setParentValue() {
-      this.parentContainer.setValue(this.value);
+    setParentValue(value) {
+      this.parentContainer.setValue(value || this.$el.value);
     },
     setParentDisabled() {
       this.parentContainer.isDisabled = this.disabled;
@@ -48,10 +48,12 @@ export default {
       this.setParentValue();
     },
     onInput() {
+      const value = this.$el.value;
+
       this.setParentValue();
-      this.parentContainer.inputLength = this.value ? this.value.length : 0;
-      this.$emit('change', this.value);
-      this.$emit('input', this.value);
+      this.parentContainer.inputLength = value ? value.length : 0;
+      this.$emit('change', value);
+      this.$emit('input', value);
     }
   }
 };

src/components/mdTooltip/mdTooltip.vue

@@ -23,13 +23,14 @@
     },
     data: () => ({
       active: false,
+      parentClass: null,
       transitionOff: false,
       topPosition: false,
       leftPosition: false
     }),
     computed: {
       classes() {
-        return {
+        const cssClasses = {
           'md-active': this.active,
           'md-transition-off': this.transitionOff,
           'md-tooltip-top': this.mdDirection === 'top',
@@ -37,6 +38,12 @@
           'md-tooltip-bottom': this.mdDirection === 'bottom',
           'md-tooltip-left': this.mdDirection === 'left'
         };
+
+        if (this.parentClass) {
+          cssClasses[this.parentClass] = true;
+        }
+
+        return cssClasses;
       },
       style() {
         return {
@@ -52,6 +59,13 @@
       }
     },
     methods: {
+      removeTooltips() {
+        const tooltips = [...document.querySelectorAll('.md-tooltip')];
+
+        tooltips.forEach((tooltip) => {
+          tooltip.parentNode.removeChild(tooltip);
+        });
+      },
       calculateTooltipPosition() {
         let position = this.parentElement.getBoundingClientRect();
         let cssPosition = {};
@@ -90,10 +104,23 @@
         this.topPosition = cssPosition.top;
         this.leftPosition = cssPosition.left;
       },
+      generateTooltipClasses() {
+        let classes = [];
+
+        this.parentElement.classList.forEach((cssClass) => {
+          if (cssClass.indexOf('md-') >= 0 && cssClass !== 'md-active') {
+            classes.push(cssClass + '-tooltip');
+          }
+        });
+
+        this.parentClass = classes.join(' ');
+      },
       open() {
-        document.body.appendChild(this.tooltipElement);
+        this.removeTooltips();
+        this.rootElement.appendChild(this.tooltipElement);
         getComputedStyle(this.tooltipElement).top;
         this.transitionOff = true;
+        this.generateTooltipClasses();
         this.calculateTooltipPosition();
 
         window.setTimeout(() => {
@@ -106,7 +133,7 @@
           this.tooltipElement.removeEventListener(transitionEndEventName, cleanupElements);
 
           if (this.tooltipElement.parentNode && !this.tooltipElement.classList.contains('md-active')) {
-            document.body.removeChild(this.tooltipElement);
+            this.rootElement.removeChild(this.tooltipElement);
           }
         };
 
@@ -119,6 +146,7 @@
       this.$nextTick(() => {
         this.tooltipElement = this.$el;
         this.parentElement = this.tooltipElement.parentNode;
+        this.rootElement = this.$root.$el;
 
         this.$el.parentNode.removeChild(this.$el);
 
@@ -131,9 +159,7 @@
     beforeDestroy() {
       this.active = false;
 
-      if (this.$el.parentNode) {
-        document.body.removeChild(this.$el);
-      }
+      this.removeTooltips();
 
       if (this.parentElement) {
         this.parentElement.removeEventListener('mouseenter', this.open);