DOCSEARCHbyAlgolia
Submit Docs

VueTippy

website·Indexed 29 days ago

https://vue-tippy.netlify.app/

A Vue.js wrapper for Tippy.js, providing a complete tooltip, popover, dropdown, and menu solution. It offers multiple integration flavors including a Vue Directive, a Vue Component, and a Composition API for flexible interaction and complex tooltip builds.

Tokens
5.9K
Snippets
52
Records
53
Agent score
75%

What's inside VueTippy

  1. Overview of VueTippy for Vue 3

    VueTippy is a Vue 3 wrapper for the Tippy.js library (powered by Popper). It provides a complete solution for implementing tooltips, popovers, dropdowns, and menus in Vue applications. Key features include an optimized positioning engine for flipping and overflow prevention, WAI-ARIA compliance for accessibility, custom CSS theming, and native TypeScript support.

  2. Implement the Material filling effect

    To achieve the Material filling effect, you must import both the backdrop.css and shift-away.css stylesheets and set the animateFill prop to true.
    import 'tippy.js/dist/backdrop.css';
import 'tippy.js/animations/shift-away.css';

useTippy(target, {
  animateFill: true,
});

  3. Style SVG arrow borders

    When using duplicated SVG arrows (via arrow: roundArrow + roundArrow), target the first and last child SVGs separately to define the border and fill colors.
    /* The border (first SVG) */
.tippy-box[data-theme~='tomato'] > .tippy-svg-arrow > svg:first-child {
  fill: yellow;
}

/* The fill (last SVG) */
.tippy-box[data-theme~='tomato'] > .tippy-svg-arrow > svg:last-child {
  fill: tomato;
}

  4. Create a custom Tippy theme

    Custom themes are created by targeting the .tippy-box element using the attribute selector [data-theme~='themeName']. This allows a single tippy to potentially support multiple theme names in a space-separated list.
    /* CSS Definition */
.tippy-box[data-theme~='tomato'] {
  background-color: tomato;
  color: yellow;
}
    /* Application via JS */
useTippy(target, {
  theme: 'tomato',
})

  5. Add borders to Tippy boxes and arrows

    Import border.css to enable color inheritance for borders.

    For CSS arrows, the arrow border will automatically match the box border. For SVG arrows, you must duplicate the arrow SVG in the configuration to create a 'border' layer (the first SVG) and a 'fill' layer (the second SVG).

    import 'tippy.js/dist/border.css'
import { roundArrow } from 'vue-tippy'

useTippy(target, {
  arrow: roundArrow + roundArrow, // Duplicate for border effect
})

  6. Ways to implement tooltips with VueTippy

    VueTippy provides three different ways to integrate tooltips and popovers into a Vue 3 application depending on the desired level of control and syntax preference: as a Vue Directive, as a Vue Component, or via the Composition API.
    // 1. As a Directive
<div v-tippy="'Tooltip content'">Hover me</div>

// 2. As a Component
<tippy content="Tooltip content">
  <span>Hover me</span>
</tippy>

// 3. Via Composition API
const tippy = useTippy();

  7. Install VueTippy globally in a Vue application

    To use vue-tippy throughout your application without importing it in every component, install it as a global plugin using app.use(). You can optionally provide a configuration object to define custom directive/component names and global default props (such as placement and HTML support). Importing tippy.js/dist/tippy.css is recommended for default styling.
    import { createApp } from 'vue'
import VueTippy from 'vue-tippy'
// or: import { plugin as VueTippy } from 'vue-tippy'
import 'tippy.js/dist/tippy.css' // optional for styling

const app = createApp({})

app.use(
  VueTippy,
  {
    directive: 'tippy', // Sets the directive to v-tippy
    component: 'tippy', // Sets the component to <tippy/>
    componentSingleton: 'tippy-singleton', // Sets the singleton component to <tippy-singleton/>
    defaultProps: {
      placement: 'auto-end',
      allowHTML: true,
    },
  }
)

app.mount('#app')

  8. Install base Tippy styles

    To use Tippy, you must first import the base CSS stylesheet to ensure the tooltips are positioned and styled correctly.
    import 'tippy.js/dist/tippy.css'

  9. Use built-in tippy.js animations

    vue-tippy uses an opacity fade transition by default. You can use additional built-in animations such as shift-away, shift-toward, scale, and perspective. These must be imported as CSS files and then specified via the animation prop. Each animation also supports subtle and extreme variants.
    import 'tippy.js/animations/scale.css';
// For variants: import 'tippy.js/animations/scale-subtle.css' or 'tippy.js/animations/scale-extreme.css'

useTippy(target, {
  animation: 'scale',
});

  10. Style and customize SVG arrows

    SVG arrows require the svg-arrow.css stylesheet. They are styled using the fill property on .tippy-svg-arrow. Unlike CSS arrows, SVG arrows do not require placement-specific selectors for coloring.
    import 'tippy.js/dist/svg-arrow.css'
import { roundArrow } from 'vue-tippy'

useTippy(target, {
  arrow: roundArrow,
})

  11. Install vue-tippy dependency

    Add the vue-tippy version 6 dependency to your project using either npm or yarn.
    # Using npm
npm install vue-tippy@v6

# Using yarn
yarn add vue-tippy@v6

  12. Create custom CSS animations for tooltips

    To create a custom animation, define CSS rules targeting the .tippy-box element. Use the [data-animation] attribute to name your animation and [data-state] (either hidden or visible) to define the transition states. You can also target specific placements using [data-placement^="top"] etc.
    /* CSS Definition */
.tippy-box[data-animation='rotate'][data-state='hidden'] {
  opacity: 0;
  transform: rotate(90deg);
}
    /* Implementation */
useTippy(target, {
  animation: 'rotate',
});