vuejs-tippy

0.0.5 • Public • Published

VueJS Directive + Component for tippy.js (v5)

Maintainability npm weekly downloads downloads bundle size license

Notice: 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 -->
<script src="https://unpkg.com/vuejs-tippy@0.0.4/dist/vuejs-tippy.min.js"></script>

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
import Vue from 'vue'
import VueJSTippy from 'vuejs-tippy'
 
Vue.use(VueJSTippy, options); // component is also loaded here

Usage

Default Options

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:
<button v-tippy @onShown="onShownMethod"></button>
 
<tippy @onShown="onShownMethod"></tippy>

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
<button v-tippy <content|title>="I'm a tooltip!">Hover over me!</button>
Dynamic Tooltip
  • Set tooltip content via directive argument:v-tippy="variable" or as :content prop
<button v-tippy :content="timer">Hover over me!</button>
 
<!-- or -->
 
<button v-tippy="timer">Hover over me!</button>
Directive Modifiers
  • append to v-tippy directive e.g. v-tippy.modifier, applies only to tippy.js boolean props
<button v-tippy.interactive content="sets tippy.js option {interactive: true}">
    Hover over me!
</button>

<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>
<tippy :content="timer">
    <button>Hover for a reactive tooltip</button>
</tippy>
 
<tippy :options="{content: timer, theme: 'light'}">
    <button>Props to for quick customization</button>
</tippy>
 
<!-- external tippy with trigger named -->
 
<tippy for="target">
    I'm a tooltip!
</tippy>
 
<button name="target">Hover over me!</button>
 
<!-- tippy content as reactive component -->
 
<tippy>
    <template slot="content">
        <custom-component :prop="timer"></custom-component>
    </template>
 
    <button>Reactive component tooltip</button>
</tippy>
 
<!-- external tippy for multiple elements, uses cloneNode(true), unsure of reactivity support -->
 
<tippy for=".btnToolTip">
    <p>single tooltip for multiple elements of the same class</p>
</tippy>
 
<div>
    <button class="btnToolTip" v-for="i in 5">
        Button #{{ i }}
    </button>
</div>

Credits

Package Sidebar

Install

npm i vuejs-tippy

Weekly Downloads

1

Version

0.0.5

License

MIT

Unpacked Size

27 kB

Total Files

5

Last publish

Collaborators

  • kanalumaddela