# vue-comps-tooltip

> a advanced tooltip

Latest version **1.1.0** (published 2016-09-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-comps-tooltip
pnpm add vue-comps-tooltip
yarn add vue-comps-tooltip
bun add vue-comps-tooltip
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2016-09-19 |
| First published | 2016-04-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | * |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Paul Pflugradt |
| Maintainers | paulpflug |
| Keywords | tooltip, component, vue |

## Links

- npm: https://www.npmjs.com/package/vue-comps-tooltip
- Repository: https://github.com/vue-comps/vue-comps-tooltip
- Homepage: https://github.com/vue-comps
- Issues: https://github.com/vue-comps/vue-comps-tooltip/issues
- npm.io page: https://npm.io/package/vue-comps-tooltip

## Dependencies (1)

- [vue-mixins](https://npm.io/package/vue-mixins.md) ^0.3.0

## Recent versions

- 1.1.0 (latest) — 2016-09-19
- 1.0.0 — 2016-09-16
- 0.2.3 — 2016-09-03
- 0.2.2 — 2016-08-10
- 0.2.1 — 2016-06-20
- 0.2.0 — 2016-06-20
- 0.1.0 — 2016-04-14

## README

# vue-comps-tooltip

a unstyled tooltip, which adjusts opening direction to be in viewport.

### [Demo](https://vue-comps.github.io/vue-comps-tooltip)

# Install

```sh
npm install --save-dev vue-comps-tooltip
```
or include `build/bundle.js`.

## Usage
```coffee
# in your component
components:
  "tooltip": require("vue-comps-tooltip")
# or, when using bundle.js
components:
  "tooltip": window.vueComps.tooltip
```
```html
<button> Hover
  <tooltip>Content</tooltip>
</button>
```
see [`dev/`](dev/) for examples.

#### Props
Name | type | default | description
---:| --- | ---| ---
offset | Number | 0 | offset to the parent
anchor | String | "snwe" | direction of opening, viewport dependent. "s" forces to open down. "sn" would try to open down, the up.
ignore-parent | Boolean | false | will not set-up `mouseenter`/`mouseleave` listener on parent
is-opened	| Boolean	| false | (two-way) set to open / close
transition | String | "tooltip" | name of a vue transition. [Detailed description](#transition)
parent | Element | parentElement | where the tooltip should attach its listeners
on-body | Boolean | false | will be positioned on body instead of parent element. [Detailed description](#positioning)

#### Events
Name |  description
---:| ---
before-enter | will be called before open animation
after-enter |  will be called when opened
before-leave |  will be called before close animation
after-leave |  will be called when closed
toggled(isOpened:Boolean) | emitted when gets opened or closed. Alternative to use two-way `is-opened` prop

#### Positioning
There are two ways of positioning. The default is as a child of the parent element, the other posibility is on `body`.
- The parent positioning can be problematic when you have an `overflow:hidden` as a parent to the nearest element with `position:absolute|relative|fixed` and the tooltip is overflowing.
- the `body` positioning can be problematic when the parent is moving relative to `body` or when you depend on inheritance of styles.

#### Transition

You can provide a vue transition like this:
```js
Vue.transition("fade",{
  // your transition
})
// or in the instance:
transitions: {
  fade: {
    // your transition
  }
}
// usage:
template: "<tooltip transition='fade'></tooltip>"
```

You can access several properties in your enter hook:
```js
enter: function(el,cb) {
  // in which direction the tooltip will open. one of s, n, w or e
  this.direction
  // style properties as numbers
  this.top
  this.left
  this.width
  this.height
  this.offset // will be added on or subtracted of top or left depending on direction
}
```

see [`dev/transition`](dev/transition.vue) for a working example.

## Changelog
- 1.1.0  
added toggled event  
set default transition  

- 1.0.0  
renamed `position` prop to `on-body` - now is a boolean  
now using vue transitions  
events are renamed after vue transitions  


# Development
Clone repository.
```sh
npm install
npm run dev
```
Browse to `http://localhost:8080/`.

## License
Copyright (c) 2016 Paul Pflugradt
Licensed under the MIT license.

---
_Source: https://npm.io/package/vue-comps-tooltip · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._