tippy.js (v5)
VueJS Directive + Component forNotice: This is a pre-release. Currently the component wraps everything in <div>
because it doesn't make sense in my opinion to use <span>
or styling the <div>
to be inline
/inline-block
. There are clases added for you to handle the styling/formatting.
Todo:
- figure out a better way to avoid wrapping everything
- write tests
- efficient code
- tippy.js singleton?
Quick Setup
CDN
<!-- I have no idea if this works, tell me if it doesn't -->
Package Manager
Client side JS should be a dev dependency for those who build their app's assets
# npm npm i --save-dev vuejs-tippy # yarn yarn add --dev vuejs-tippy
Vue; // component is also loaded here
Usage
Default Options
- tippy.js props combined with the following:
key | desc | type | defaut |
---|---|---|---|
directive | controls v-<directive> and component: <directive> |
String |
tippy |
ignoreAttributes | disables data-tippy-* for performance |
Boolean |
true |
Lifecycle Hooks
- Both the directive and component support tippy.js's hooks. Simply put @<hook> on the element/component for example:
v-tippy
Directive
- allows using
title
, but is static v-tippy
and:content
are checked on updates- utilizes vuejs directive modifiers
Static Tooltip
content
,title
as attributes
="I'm a tooltip!">Hover over me!
Dynamic Tooltip
- Set tooltip content via directive argument:
v-tippy="variable"
or as:content
prop
Hover over me! <!-- or --> Hover over me!
Directive Modifiers
- append to
v-tippy
directive e.g.v-tippy.modifier
, applies only to tippy.js boolean props
Hover over me!
<tippy>
Vue Component
- only
:content
and:options
:enabled
&:visible
boolean props for tippy's .enable() / .disable() and .show() / .hide() functions respectively- can set options quickly via html attributes
- ex:
<tippy animate-fill="true" content="bg fill tooltip"><button>Hover over me!</button></tippy>
- ex:
Hover for a reactive tooltip Props to for quick customization <!-- external tippy with trigger named --> I'm a tooltip! Hover over me! <!-- tippy content as reactive component --> Reactive component tooltip <!-- external tippy for multiple elements, uses cloneNode(true), unsure of reactivity support --> single tooltip for multiple elements of the same class Button #{{ i }}