Skip to content
Yet another vue tooltip component.
Vue JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
examples
src
.babelrc
.eslintignore
.eslintrc.json
.gitignore
README.md
package.json

README.md

vue-datepicker

This is yet another vue tooltip component.

Install

Use npm to download code:

npm install hsy-vue-tooltip -S

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

import Tooltip from 'hsy-vue-tooltip'

Vue.use(Tooltip)

Usage

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>
  1. 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>
  1. 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>

Props

Coming soon, it's driving on the freeway built by your stars 😝

Demo

demo

Screenshot

You can’t perform that action at this time.