hsy-vue-tooltip

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