Created
April 21, 2018 10:10
-
-
Save ScottBurfieldMills/dcc860a47f0334835a333eae489ec906 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE> | |
| <html> | |
| <body> | |
| <div id="app"> | |
| <form> | |
| <div> | |
| <label>Username</label> | |
| <input type="username" v-model="formData.username" /> | |
| <tooltip :show="tooltips.username.vis" :message="tooltips.username.message" @tooltip:hide="tooltips.username.vis = false" | |
| /> | |
| </div> | |
| <div> | |
| <label>Password</label> | |
| <input type="text" v-model="formData.password" /> | |
| <tooltip :show="tooltips.password.vis" :message="tooltips.password.message" @tooltip:hide="tooltips.password.vis = false" | |
| /> | |
| </div> | |
| </form> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> | |
| <script> | |
| Vue.component('tooltip', { | |
| props: ['show', 'message'], | |
| template: `<transition name="shrink"> | |
| <div v-show="show" class="tooltip" @click="hide"> | |
| <div class="tooltip-arrow"></div> | |
| <div class="tooltip-container">{{message}}</div> | |
| </div> | |
| </transition>`, | |
| methods: { | |
| hide() { | |
| this.$emit('tooltip:hide'); | |
| }, | |
| } | |
| }); | |
| new Vue({ | |
| el: "#app", | |
| data: { | |
| formData: { | |
| username: '', | |
| password: '' | |
| }, | |
| tooltips: { | |
| username: { | |
| message: 'Fix your username', | |
| vis: true | |
| }, | |
| password: { | |
| message: 'Fix your password', | |
| vis: true | |
| } | |
| } | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment