new_tooltip v1.0.5

Install

Use npm to download code:

npm install vue-tooltip

then import it into your project, add below code into your main.js:

import Tooltip from 'new_tooltip'

Vue.use(Tooltip)

Usage message

Message为一个消息提示框，默认3秒钟消失

eg:

    this.$message('这是一个message')
    若想改变消失时间
    this.$message({
      message: '这是一个message',
      time: 3000
    })

Usage tooltip

There are three modes for tooltip's displaying:

1. hover, as it's name suggests, it uses mouseover/mouseleave events to show/hide tooltip

   <template>
   <tooltip placement="top-left" mode="hover">
     <div slot="outlet">top left</div>
     <div slot="tooltip">this is top left tip</div>
   </tooltip>
   </template>

2. click, it uses click inside/outside events to show/hide tooltip

   <template>
     <div class="confirm">
       <tooltip placement="bottom-left" mode="click" v-model="invisible">
         <div slot="outlet">
           Remove
         </div>
         <div slot="tooltip">
           <h3>Are your sure?</h3>
           <div class="btns">
             <button class="yes" @click="handleYes">Yes</button>
             <button class="no" @click="handleNo">No</button>
           </div>
         </div>
       </tooltip>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         invisible: true
       }
     },
     methods: {
       handleYes() {
         alert('Yes')
       },
       handleNo() {
         alert('No')
         this.invisible = true
       }
     }
   }
   </script>

3. manual, if you want to show/hide tooltip manually

   <template>
   <tooltip placement="top-left" mode="manual" :visible="visible">
     <div slot="outlet">top left</div>
     <div slot="tooltip">this is top left tip</div>
   </tooltip>
   </template>
   
   <script>
   export default {
     data() {
       return {
         visible: false
       }
     },
     mounted() {
       setTimeout(() => {
         this.visible = true
       }, 1000)
     }
   }
   </script>