hsy-vue-tooltip

vue tooltip component

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
hsy-vue-tooltip
0.0.75 years ago6 years agoMinified + gzip package size for hsy-vue-tooltip in KB

Readme

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

```html
<div slot="outlet">top left</div>
<div slot="tooltip">this is top left tip</div>
```
  1. click, it uses click inside/outside events to show/hide tooltip

```html
<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>

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

```html
<div slot="outlet">top left</div>
<div slot="tooltip">this is top left tip</div>

```

Props

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

Demo

demo

Screenshot