DEPRECATED see cerijs and ceri-tooltip
a unstyled tooltip, which adjusts opening direction to be in viewport.
npm install --save-dev vue-comps-tooltipor include build/bundle.js.
# in your component
components:
"tooltip": require("vue-comps-tooltip")
# or, when using bundle.js
components:
"tooltip": window.vueComps.tooltip<button> Hover
<tooltip>Content</tooltip>
</button>see dev/ for examples.
| 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 |
| 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 |
| 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 |
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:hiddenas a parent to the nearest element withposition:absolute|relative|fixedand the tooltip is overflowing. - the
bodypositioning can be problematic when the parent is moving relative tobodyor when you depend on inheritance of styles.
You can provide a vue transition like this:
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:
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 for a working example.
-
1.1.0
added toggled event
set default transition -
1.0.0
renamedpositionprop toon-body- now is a boolean
now using vue transitions
events are renamed after vue transitions
Clone repository.
npm install
npm run devBrowse to http://localhost:8080/.
Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.