https://github.com/egoist/v-tippy

Vue.js binding for Tippy.js
https://github.com/egoist/v-tippy

directive tooltip vue

Last synced: 17 days ago
JSON representation

Vue.js binding for Tippy.js

• Host: GitHub
• URL: https://github.com/egoist/v-tippy
• Owner: egoist
• License: mit
• Created: 2017-07-21T08:18:59.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-12T09:52:42.000Z (almost 2 years ago)
• Last Synced: 2024-10-10T12:14:30.861Z (about 1 month ago)
• Topics: directive, tooltip, vue
• Language: JavaScript
• Homepage:
• Size: 233 KB
• Stars: 55
• Watchers: 5
• Forks: 4
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# v-tippy

[![NPM version](https://img.shields.io/npm/v/v-tippy.svg?style=flat)](https://npmjs.com/package/v-tippy) [![NPM downloads](https://img.shields.io/npm/dm/v-tippy.svg?style=flat)](https://npmjs.com/package/v-tippy) [![CircleCI](https://circleci.com/gh/egoist/v-tippy/tree/master.svg?style=shield)](https://circleci.com/gh/egoist/v-tippy/tree/master)  [![donate](https://img.shields.io/badge/$-donate-ff69b4.svg?maxAge=2592000&style=flat)](https://github.com/egoist/donate)

> Vue.js binding for [Tippy.js](https://atomiks.github.io/tippyjs/) which is a powerful and elegant tooltip library.

## Install

```bash

yarn add v-tippy

```

## Usage

First, use the plugin to register `v-tippy` directive:

```js

import Tippy from 'v-tippy'

// Don't forget to include CSS somewhere!

// Basically it's a copy of `tippy.js/dist/tippy.css`

import 'v-tippy/dist/tippy.css'

Vue.use(Tippy)

```

Then, use it:

```vue

hover me

```

### Supply Tippy.js options

You can pass **all** [Tippy.js](https://atomiks.github.io/tippyjs/) [options](https://atomiks.github.io/tippyjs/#all-settings) as `v-tippy` directive's arguments:

```vue

  hover me

```

### Default settings

You can tweak default settings globally while installing the plugin:

```js

Vue.use(Tippy, {

  position: 'left',

  onShown: () => console.log('lol'),

  // ... other options you wanna change globally

})

```

## Gotchas

> Can I supply Tippy.js options via `data-*` attributes?

Sure you can, but it's will only be used for once, when the binding value changes (eg: `:data-position="position"`), the poper generated by Tippy.js will not be updated. Supplying options via directive arguments is better.

## Contributing

1. Fork it!

2. Create your feature branch: `git checkout -b my-new-feature`

3. Commit your changes: `git commit -am 'Add some feature'`

4. Push to the branch: `git push origin my-new-feature`

5. Submit a pull request :D

## Author

**v-tippy** © [egoist](https://github.com/egoist), Released under the [MIT](./LICENSE) License.


Authored and maintained by egoist with help from contributors ([list](https://github.com/egoist/v-tippy/contributors)).

> [egoist.moe](https://egoist.moe) · GitHub [@egoist](https://github.com/egoist) · Twitter [@_egoistlily](https://twitter.com/_egoistlily)