<script src="//unpkg.com/vue/dist/vue.js"></script> <script src="//unpkg.com/[email protected]/lib/index.umd.min.js"></script> <div id="app"> <span class="link b1" v-tip="msg"> v-tip="msg" </span> <span class="link b2" v-tip.dark.left="msg"> v-tip.dark.left="msg" </span> <span class="link b3" v-tip.dark.click="msg"> v-tip.dark.click="msg" </span> <span class="link b4" v-tip.dark="msg"> v-tip.dark="msg" </span> <span class="link b5" v-tip.dark.transition.top="msg"> v-tip.dark.transition.top="msg" </span> <span class="link b6" v-tip.dark.transition.right="msg"> v-tip.dark.transition.right="msg" </span> <span class="link b7" v-tip.dark.transition.bottom="msg"> v-tip.dark.transition.bottom="msg" </span> </div>
Vue.use(Vtip.directive) new Vue({ el: '#app', data () { return { msg: '这里是显示信息' } } })
@import url("//unpkg.com/[email protected]/lib/index.min.css"); * { padding: 0; margin: 0; } html, body, #app { width: 100%; height: 100%; font-size: 12px; } #app { position: relative; } .link { color: #55b559; padding: 8px 10px; position: absolute; margin: 20px 10px; } .b1 { top: 0; left: 0; } .b2 { top: 0; right: 0; } .b3 { bottom: 0; left: 0; } .b4 { bottom: 0; right: 0; } .b5 { top: 30%; left: 50%; transform: translate(-50%, -50%); } .b6 { top: 50%; left: 50%; transform: translate(-50%, -50%); } .b7 { top: 70%; left: 50%; transform: translate(-50%, -50%); }