### Install vue-tippy

Source: https://context7.com/kabbouchi/vue-tippy/llms.txt

Install the vue-tippy package using npm or yarn.

```bash
# npm
npm install vue-tippy@v6

# yarn
yarn add vue-tippy@v6
```

--------------------------------

### Start Development Server

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/README.md

Run this command to start the development server and begin working on the project.

```bash
yarn dev
```

--------------------------------

### Install Dependencies with Yarn

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/README.md

Use this command to install all project dependencies using Yarn.

```bash
yarn install
```

--------------------------------

### Plugin Installation with setDefaultProps

Source: https://context7.com/kabbouchi/vue-tippy/llms.txt

Set global Tippy.js defaults either at plugin install time or at any time using setDefaultProps. This allows for consistent configuration across all tooltips.

```javascript
// Option 1: at install time
import { createApp } from 'vue'
import VueTippy from 'vue-tippy'

createApp(App).use(VueTippy, {
  defaultProps: {
    placement: 'right',
    animation: 'shift-away',
    theme: 'light',
  },
}).mount('#app')

// Option 2: at any time (e.g., after a theme toggle)
import { setDefaultProps } from 'vue-tippy'

setDefaultProps({
  placement: 'bottom',
  duration: [200, 150],
})
```

--------------------------------

### Install VueTippy v6

Source: https://github.com/kabbouchi/vue-tippy/blob/main/README.md

Use npm or yarn to install the vue-tippy package version 6.

```bash
npm install vue-tippy@v6
```

```bash
yarn add vue-tippy@v6
```

--------------------------------

### Plugin Installation with `setDefaultProps`

Source: https://context7.com/kabbouchi/vue-tippy/llms.txt

Set global Tippy.js defaults either at plugin install time or at any point using the exported `setDefaultProps` helper (re-exported directly from `tippy.js`).

```APIDOC
## Plugin Installation with `setDefaultProps`

Set global Tippy.js defaults either at plugin install time or at any point using the exported `setDefaultProps` helper (re-exported directly from `tippy.js`).

```js
// Option 1: at install time
import { createApp } from 'vue'
import VueTippy from 'vue-tippy'

createApp(App).use(VueTippy, {
  defaultProps: {
    placement: 'right',
    animation: 'shift-away',
    theme: 'light',
  },
}).mount('#app')

// Option 2: at any time (e.g., after a theme toggle)
import { setDefaultProps } from 'vue-tippy'

setDefaultProps({
  placement: 'bottom',
  duration: [200, 150],
})
```
```

--------------------------------

### Install VueTippy Globally

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/installation.md

Globally install the VueTippy plugin in your Vue application. Import the plugin and CSS, then use `app.use()` with optional configuration.

```javascript
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,
  // optional
  {
    directive: 'tippy', // => v-tippy
    component: 'tippy', // => <tippy/>
    componentSingleton: 'tippy-singleton', // => <tippy-singleton/>,
    defaultProps: {
      placement: 'auto-end',
      allowHTML: true,
    }, // => Global default options * see all props
  }
)

app.mount('#app')
```

--------------------------------

### Configure vue-tippy with Global Installation

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/configuration.md

Use this method to set default props for all tippy instances when installing the plugin globally. Ensure Vue is set up before using this.

```js
import { createApp } from 'vue'
import VueTippy from 'vue-tippy'

const app = createApp({})

app.use(VueTippy, {
  defaultProps: { placement: 'right' },
})

app.mount('#app')
```

--------------------------------

### `useTippyComponent(options?, children?)` Composable

Source: https://context7.com/kabbouchi/vue-tippy/llms.txt

Renders the `<Tippy>` component programmatically from a `setup()` render function, giving access to the component instance for imperative control.

```APIDOC
## `useTippyComponent(options?, children?)` Composable

Renders the `<Tippy>` component programmatically from a `setup()` render function, giving access to the component instance for imperative control.

```script setup
import { h, ref } from 'vue'
import { useTippyComponent } from 'vue-tippy'

const { instance, TippyComponent } = useTippyComponent(
  { content: 'Rendered programmatically', placement: 'right', arrow: true },
  () => h('button', 'Hover me')
)

function showProgrammatically() {
  instance.value?.show()
}
</script>

<template>
  <component :is="() => TippyComponent" />
  <button @click="showProgrammatically">Show tooltip</button>
</template>
```
```

--------------------------------

### Vue-Tippy Custom Follow Mouse Implementation

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/examples/advanced-follow-mouse.md

This snippet shows the Vue component setup for a tooltip that follows the mouse. It requires importing the tippy function and configuring the followCursor option. Ensure tippy is correctly installed and imported.

```javascript
import { tippy } from "tippy.js";

export default {
  mounted() {
    tippy("#follow-mouse", {
      content: "I follow your mouse!",
      followCursor: true
    });
  }
};
```

--------------------------------

### onMount Lifecycle Hook

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/props.md

Invoked once the tippy has been mounted to the DOM and the popperInstance has been created. Use this for setup that requires the tippy instance to be available.

```javascript
useTippy(target, {
  onMount(instance) {
    // ...
  },
})
```

--------------------------------

### Using useTippyComponent Composable

Source: https://context7.com/kabbouchi/vue-tippy/llms.txt

Render the Tippy component programmatically from a setup render function. Provides access to the component instance for imperative control. Requires importing useTippyComponent.

```vue
<script setup>
import { h, ref } from 'vue'
import { useTippyComponent } from 'vue-tippy'

const { instance, TippyComponent } = useTippyComponent(
  { content: 'Rendered programmatically', placement: 'right', arrow: true },
  () => h('button', 'Hover me')
)

function showProgrammatically() {
  instance.value?.show()
}
</script>

<template>
  <component :is="() => TippyComponent" />
  <button @click="showProgrammatically">Show tooltip</button>
</template>
```

--------------------------------

### Composition API Usage

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/basic-usage.md

Integrate Vue-Tippy with the Composition API using the `useTippy` hook. This is suitable for more advanced setups or when working with the `setup` function.

```js
import { defineComponent, ref, h } from 'vue'
import { useTippy } from 'vue-tippy'

export default defineComponent({
  setup() {
    const button = ref()

    useTippy(button, {
      content: 'Hi!',
    })

    return () => h('button', { ref: button }, 'Tippy!')
  },
})
```

--------------------------------

### Material Filling Effect Setup

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/animations.md

To achieve the material filling effect, import both `backdrop.css` and a chosen animation stylesheet, such as `shift-away.css`. Then, enable the effect with the `animateFill` prop.

```javascript
import 'tippy.js/dist/backdrop.css'
import 'tippy.js/animations/shift-away.css'
```

```javascript
useTippy(target, {
  animateFill: true,
})
```

--------------------------------

### Global Plugin Installation

Source: https://context7.com/kabbouchi/vue-tippy/llms.txt

Register vue-tippy as a global plugin in your main Vue application file. This makes directives and components available throughout your app.

```javascript
// main.js — global plugin installation
import { createApp } from 'vue'
import VueTippy from 'vue-tippy'
import 'tippy.js/dist/tippy.css' // base styles

const app = createApp(App)

app.use(VueTippy, {
  directive: 'tippy',
  component: 'tippy',
  componentSingleton: 'tippy-singleton',
  defaultProps: {
    placement: 'auto-end',
    allowHTML: true,
  },
})

app.mount('#app')
```

--------------------------------

### Configure vue-tippy with Global Function

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/configuration.md

Use this method to set default props for all tippy instances using a dedicated function. This is an alternative to plugin installation for setting defaults.

```js
import { setDefaultProps } from 'vue-tippy'

setDefaultProps({
  placement: 'right',
})
```

--------------------------------

### <Tippy> Component Usage

Source: https://context7.com/kabbouchi/vue-tippy/llms.txt

Utilize the `<Tippy>` component for more complex tooltip setups, including named slots for rich HTML content and props for customization.

```html
<template>
  <!-- Basic string content -->
  <Tippy content="Hello!">
    <button>Hover me</button>
  </Tippy>

  <!-- Named content slot with rich HTML -->
  <Tippy arrow interactive :hide-on-click="false" @state="onState">
    <template #default="{ state }">
      <button :class="{ active: state.isVisible }">Open tooltip</button>
    </template>
    <template #content="{ hide }">
      <div style="padding: 8px">
        <strong>Interactive tooltip</strong>
        <p>Click below to close.</p>
        <button @click="hide()">Close ✕</button>
      </div>
    </template>
  </Tippy>

  <!-- Mount directly on child node (no wrapper span) -->
  <Tippy content="No wrapper tag" :tag="null">
    <button>Child is the trigger</button>
  </Tippy>

  <!-- Attach tooltip to parent element -->
  <button>
    <Tippy to="parent" content-tag="div">
      Tooltip attached to the parent button
    </Tippy>
    Click me
  </button>
</template>

<script setup>
import { Tippy } from 'vue-tippy'
import 'tippy.js/dist/tippy.css'

function onState(state) {
  console.log('Tippy state:', state)
  // { isEnabled, isVisible, isDestroyed, isMounted, isShown }
}
</script>
```

--------------------------------

### Vue Directive Usage

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/basic-usage.md

Use the `v-tippy` directive to add tooltips to HTML elements. The content can be a string or an object. Importing the directive is optional if the plugin is installed globally.

```html
<template>
  <button v-tippy="{ content: 'Hi!' }">Tippy!</button>
  <button v-tippy="'Hello!'">Tippy!</button>
</template>

<!-- 
  The below is optional in case you 
  installed the plugin globally
 -->
<script>
  import { directive } from 'vue-tippy'

  export default {
    directives: {
      tippy: directive,
    },
  }
</script>
```

--------------------------------

### Initialize VueTippy with useTippy

Source: https://github.com/kabbouchi/vue-tippy/blob/main/index.html

Demonstrates how to initialize VueTippy using the `useTippy` composable function with a ref element and configuration options.

```javascript
const { createApp, h, ref } = Vue
const { useTippy } = VueTippy

createApp({
  setup() {
    const element = ref()
    useTippy(element, {
      content: 'Test',
    })
    return () => [
      h('span', { ref: element }, 'HI!'),
      h(VueTippy.Tippy, { content: 'test' }, 'HI2!'),
    ]
  },
}).mount(document.querySelector('#app'))
```

--------------------------------

### Generate Static Build

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/README.md

Execute this command to create a production-ready static build of the application in the `dist/` directory.

```bash
yarn generate
```

--------------------------------

### Run Development Server and Tests

Source: https://github.com/kabbouchi/vue-tippy/blob/main/CONTRIBUTING.md

Use this command to launch visual tests and monitor component behavior simultaneously during development.

```bash
$ npm run dev
```

--------------------------------

### useTippy Configuration

Source: https://context7.com/kabbouchi/vue-tippy/llms.txt

Demonstrates the various props that can be passed to `useTippy()` for configuring tooltip behavior, appearance, and lifecycle.

```APIDOC
## useTippy Configuration

### Description
Configuration options for the `useTippy` Composition API function, controlling tooltip content, placement, visibility, behavior, positioning, visuals, plugins, and lifecycle hooks.

### Usage
```js
useTippy(target, {
  // Content
  content: 'Hello',              // string | Element | VNode | Component | Ref | computed

  // Placement
  placement: 'top',              // 'top' | 'bottom' | 'left' | 'right' | + '-start'/'-end' | 'auto'

  // Visibility
  trigger: 'mouseenter focus',   // 'click' | 'focusin' | 'mouseenter click' | 'manual'
  hideOnClick: true,             // true | false | 'toggle'
  showOnCreate: false,

  // Behavior
  interactive: false,            // keep open when hovering inside tooltip
  interactiveBorder: 2,          // px size of invisible hover buffer
  interactiveDebounce: 0,        // ms debounce for interactive hide
  delay: [100, 200],             // [showDelay, hideDelay] in ms
  duration: [300, 250],          // [showDuration, hideDuration] in ms

  // Positioning
  offset: [0, 10],               // [skidding, distance] in px
  appendTo: () => document.body, // 'parent' | Element | () => Element
  popperOptions: {               // raw Popper.js v2 options
    strategy: 'fixed',
  },

  // Visuals
  arrow: true,                   // true | false | svgString | Element
  theme: 'light',                // '' | 'light' | 'light-border' | 'material' | 'translucent' | custom
  animation: 'fade',             // 'fade' | 'shift-away' | 'scale' | 'perspective' | custom
  maxWidth: 350,                 // number | 'none'
  zIndex: 9999,

  // Plugins (pre-included)
  followCursor: false,           // true | 'horizontal' | 'vertical' | 'initial'
  sticky: false,                 // true | 'reference' | 'popper'
  inlinePositioning: false,
  animateFill: false,

  // Lifecycle hooks
  onCreate(instance) {},
  onMount(instance) {},
  onShow(instance) {},           // return false to cancel show
  onShown(instance) {},
  onHide(instance) {},           // return false to cancel hide
  onHidden(instance) {},
  onDestroy(instance) {},
  onTrigger(instance, event) {},
  onUntrigger(instance, event) {},
  onClickOutside(instance, event) {},
  onAfterUpdate(instance, partialProps) {},
  onBeforeUpdate(instance, partialProps) {},
})
```
```

--------------------------------

### Tippy Singleton Usage

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/flavor/component.md

Shows how to use the `tippy-singleton` component to manage multiple tooltips efficiently. It allows for shared configurations like `move-transition` and `placement`.

```html
<tippy-singleton move-transition="transform 0.2s ease-out" placement="top">
  <tippy content="Working tooltip">
    Button 1
  </tippy>

  <tippy content="Working tooltip">
    Button 2
  </tippy>
</tippy-singleton>
```

--------------------------------

### onCreate

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/props.md

Invoked once the tippy has been created.

```APIDOC
## onCreate

Invoked once the tippy has been created.

```js
useTippy(target, {
  onCreate(instance) {
    // ...
  },
})
```
```

--------------------------------

### Vue-Tippy Singleton Pattern with Composition API

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/flavor/composition-api.md

Manage multiple tooltips efficiently using the `useSingleton` composable. Pass a ref array containing all tooltip elements and configure singleton-wide options like placement and transitions.

```vue
<template>
  <div>
    <button :ref="v => singletons.push(v)" v-tippy="'Tooltip 1'">Button 1</button>
    <button :ref="v => singletons.push(v)" v-tippy="'Tooltip 2'">Button 2</button>
  </div>
</template>

<script setup>
import { useSingleton } from 'vue-tippy'

const singletons = ref([])

useSingleton(singletons, {
  placement: 'top',
  moveTransition: 'transform 0.2s ease-out',
})
</script>
```

--------------------------------

### Preview Static Generated App

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/README.md

Use this command to preview the static generated application after running `yarn generate`.

```bash
yarn start
```

--------------------------------

### `useSingleton(instances, options?)` Composable

Source: https://context7.com/kabbouchi/vue-tippy/llms.txt

Creates a singleton Tippy that controls multiple existing tippy instances, transitioning between them smoothly. Accepts an array of element refs (each with `v-tippy`) or a function returning instances.

```APIDOC
## `useSingleton(instances, options?)` Composable

Creates a singleton Tippy that controls multiple existing tippy instances, transitioning between them smoothly. Accepts an array of element refs (each with `v-tippy`) or a function returning instances.

```vue
<template>
  <div>
    <button
      v-for="(label, i) in labels"
      :key="i"
      :ref="(el) => { if (el) targets[i] = el }"
      v-tippy="label"
    >
      {{ label }}
    </button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { directive as vTippy, useSingleton } from 'vue-tippy'
import 'tippy.js/dist/tippy.css'

const labels = ['Alpha', 'Beta', 'Gamma', 'Delta']
const targets = ref([])

const { singleton } = useSingleton(targets, {
  placement: 'top',
  moveTransition: 'transform 0.2s ease-out',
  arrow: true,
  delay: [100, 0],
})
// `singleton.value` is the raw createSingleton instance once mounted
</script>
```
```

--------------------------------

### Show On Create Option

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/props.md

Determines if the tippy should be shown immediately upon creation, respecting any configured delay. Defaults to `false`.

```javascript
useTippy(target, {
  // default
  showOnCreate: false,
  // enable it
  showOnCreate: true,
})
```

--------------------------------

### `useTippy(el, options, settings?)` Composable

Source: https://context7.com/kabbouchi/vue-tippy/llms.txt

The primary Composition API entry point. Attaches a Tippy.js instance to a given element ref and returns a set of controls. Automatically mounts on `onMounted` and destroys on `onUnmounted`. Reactive `ref` or `reactive` options objects are watched for changes.

```APIDOC
## `useTippy(el, options, settings?)` Composable

The primary Composition API entry point. Attaches a Tippy.js instance to a given element ref and returns a set of controls. Automatically mounts on `onMounted` and destroys on `onUnmounted`. Reactive `ref` or `reactive` options objects are watched for changes.

**Returns:** `{ tippy, refresh, refreshContent, setContent, setProps, destroy, hide, show, disable, enable, unmount, mount, state }`

```vue
<template>
  <button ref="btn">{{ state.isVisible ? 'Visible!' : 'Hover me' }}</button>
  <button @click="show">Force show</button>
  <button @click="hide">Force hide</button>
  <button @click="disable">Disable</button>
  <button @click="enable">Enable</button>
</template>

<script setup>
import { ref, computed, h } from 'vue'
import { useTippy } from 'vue-tippy'
import 'tippy.js/dist/tippy.css'

const btn = ref()
const count = ref(0)

const {
  tippy,   // Ref<Instance> — raw Tippy.js instance
  show,
  hide,
  disable,
  enable,
  setContent,
  setProps,
  refresh,
  destroy,
  state,   // Ref<{ isEnabled, isVisible, isDestroyed, isMounted, isShown }>
} = useTippy(btn, {
  content: computed(() => `Clicked ${count.value} times`),
  placement: 'top',
  arrow: true,
  interactive: true,
  onShow(instance) {
    console.log('Showing tippy on:', instance.reference)
  },
  onHide() {
    console.log('Tippy hidden')
  },
})

// Programmatically update content at any time
function updateContent() {
  setContent(h('strong', 'Updated via setContent!'))
}

// Programmatically update props
function updateProps() {
  setProps({ placement: 'bottom', theme: 'light' })
}
</script>
```
```

--------------------------------

### Custom Rotate Animation CSS

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/animations.md

Define custom animations using CSS by targeting the `[data-animation]` and `[data-state]` attributes on the tippy-box. This example creates a 'rotate' animation that hides the tippy with a rotation.

```css
.tippy-box[data-animation='rotate'][data-state='hidden'] {
  opacity: 0;
  transform: rotate(90deg);
}
```

--------------------------------

### Apply Built-in Themes

Source: https://context7.com/kabbouchi/vue-tippy/llms.txt

Import and apply built-in CSS themes like 'light', 'light-border', 'material', or 'translucent' using the `theme` prop.

```js
// Import a built-in theme (light, light-border, material, translucent)
import 'tippy.js/themes/light.css'

useTippy(target, { theme: 'light' })
```

--------------------------------

### Apply Theme via Prop

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/themes.md

Pass the theme name as a string to the 'theme' prop when initializing a tippy.

```javascript
useTippy(target, {
  theme: 'light',
})
```

--------------------------------

### Composition API Usage

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/props.md

Shows how to integrate Tippy using the Composition API in Vue.js.

```js
// Composition api
useTippy(target, props)
```

--------------------------------

### onMount

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/props.md

Callback invoked once the tippy instance has been mounted to the DOM and the popperInstance has been created.

```APIDOC
## onMount

Invoked once the tippy has been mounted to the DOM (and the popperInstance created).

```js
useTippy(target, {
  onMount(instance) {
    // ...
  },
})
```
```

--------------------------------

### showOnCreate

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/props.md

Determines if the tippy should be shown immediately upon creation, respecting any configured delay.

```APIDOC
## showOnCreate

Determines if the tippy is shown once it gets created, respecting `delay`.

```js
useTippy(target, {
  // default
  showOnCreate: false,
  // enable it
  showOnCreate: true,
})
```
```

--------------------------------

### Import Base Tippy CSS

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/themes.md

Import the base CSS for Tippy.js to apply default styling.

```javascript
import 'tippy.js/dist/tippy.css'
```

--------------------------------

### Enabling animateFill

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/props.md

Enables animation for the tippy's background fill. Requires importing backdrop.css and a specific animation stylesheet.

```js
// You must also import the backdrop.css
// and animations/shift-away.css stylesheets
// for styling to work.

import 'tippy.js/dist/backdrop.css'
import 'tippy.js/animations/shift-away.css'

useTippy(target, {
  // default
  animateFill: false,
  // enable it
  animateFill: true,
})
```

--------------------------------

### Basic Tippy Component Usage

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/flavor/component.md

Demonstrates the simplest way to use the Tippy component to add a tooltip to a button.

```html
<tippy content="Hi!">
  <button>Tippy!</button>
</tippy>
```

--------------------------------

### onCreate Callback

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/props.md

Callback invoked once the tippy instance has been created. Receives the tippy instance as an argument.

```javascript
useTippy(target, {
  onCreate(instance) {
    // ...
  },
})
```

--------------------------------

### Using useTippy Composable

Source: https://context7.com/kabbouchi/vue-tippy/llms.txt

Attach a Tippy.js instance to an element ref using the useTippy composable. It automatically mounts and destroys instances. Reactive options are watched for changes. Ensure tippy.css is imported.

```vue
<template>
  <button ref="btn">{{ state.isVisible ? 'Visible!' : 'Hover me' }}</button>
  <button @click="show">Force show</button>
  <button @click="hide">Force hide</button>
  <button @click="disable">Disable</button>
  <button @click="enable">Enable</button>
</template>

<script setup>
import { ref, computed, h } from 'vue'
import { useTippy } from 'vue-tippy'
import 'tippy.js/dist/tippy.css'

const btn = ref()
const count = ref(0)

const {
  tippy,
  show,
  hide,
  disable,
  enable,
  setContent,
  setProps,
  refresh,
  destroy,
  state,
} = useTippy(btn, {
  content: computed(() => `Clicked ${count.value} times`),
  placement: 'top',
  arrow: true,
  interactive: true,
  onShow(instance) {
    console.log('Showing tippy on:', instance.reference)
  },
  onHide() {
    console.log('Tippy hidden')
  },
})

// Programmatically update content at any time
function updateContent() {
  setContent(h('strong', 'Updated via setContent!'))
}

// Programmatically update props
function updateProps() {
  setProps({ placement: 'bottom', theme: 'light' })
}
</script>
```

--------------------------------

### onShow

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/props.md

Callback invoked once the tippy begins to show. Returning `false` can cancel the show action.

```APIDOC
## onShow

Invoked once the tippy begins to show.

```js
useTippy(target, {
  onShow(instance) {
    // ...
  },
})
```

<alert type="info">You can optionally `return false` from this lifecycle to cancel a show based on a condition.</alert>
```

--------------------------------

### Using TippySingleton Component

Source: https://context7.com/kabbouchi/vue-tippy/llms.txt

Group multiple Tippy children under one shared tooltip instance for smooth transitions. Ensure Tippy and TippySingleton are imported, and tippy.css is included.

```html
<template>
  <TippySingleton
    move-transition="transform 0.2s ease-out"
    placement="top"
    arrow
  >
    <Tippy content="Tooltip for Button 1">
      <button>Button 1</button>
    </Tippy>
    <Tippy content="Tooltip for Button 2">
      <button>Button 2</button>
    </Tippy>
    <Tippy content="Tooltip for Button 3">
      <button>Button 3</button>
    </Tippy>
  </TippySingleton>
</template>

<script setup>
import { Tippy, TippySingleton } from 'vue-tippy'
import 'tippy.js/dist/tippy.css'
</script>
```

--------------------------------

### Using useSingleton Composable

Source: https://context7.com/kabbouchi/vue-tippy/llms.txt

Control multiple existing Tippy instances with a singleton. Accepts an array of element refs (each with v-tippy) or a function returning instances. Ensure tippy.css is imported.

```vue
<template>
  <div>
    <button
      v-for="(label, i) in labels"
      :key="i"
      :ref="(el) => { if (el) targets[i] = el }"
      v-tippy="label"
    >
      {{ label }}
    </button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { directive as vTippy, useSingleton } from 'vue-tippy'
import 'tippy.js/dist/tippy.css'

const labels = ['Alpha', 'Beta', 'Gamma', 'Delta']
const targets = ref([])

const { singleton } = useSingleton(targets, {
  placement: 'top',
  moveTransition: 'transform 0.2s ease-out',
  arrow: true,
  delay: [100, 0],
})
// `singleton.value` is the raw createSingleton instance once mounted
</script>
```

--------------------------------

### Advanced Vue-Tippy Composition API with Component Content

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/flavor/composition-api.md

Utilize `useTippy` to render a Vue component as tooltip content. The composable returns various functions to control the tooltip's state and properties. Import necessary components and composables.

```vue
<template>
  <button ref="btn">Tippy!</button>
</template>

<script setup>
import { useTippy } from 'vue-tippy'
import Counter from '@components/Counter.vue'

const btn = ref()

const {
  tippy,
  refresh,
  refreshContent,
  setContent,
  setProps,
  destroy,
  hide,
  show,
  disable,
  enable,
  unmount,
  mount,
  state,
} = useTippy(btn, {
  content: Counter,
  arrow: true,
})
</script>
```

--------------------------------

### Import Included Theme CSS

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/themes.md

Import specific theme CSS files like 'light' to use pre-defined styles.

```javascript
import 'tippy.js/themes/light.css'
```

--------------------------------

### Configure Tippy Instance with useTippy

Source: https://context7.com/kabbouchi/vue-tippy/llms.txt

Use the `useTippy` function to configure a tippy instance with a wide range of options, including content, placement, visibility, behavior, positioning, visuals, plugins, and lifecycle hooks. Ensure correct import and usage within your Vue component.

```javascript
useTippy(target, {
  // Content
  content: 'Hello',              // string | Element | VNode | Component | Ref | computed

  // Placement
  placement: 'top',              // 'top' | 'bottom' | 'left' | 'right' | + '-start'/'-end' | 'auto'

  // Visibility
  trigger: 'mouseenter focus',   // 'click' | 'focusin' | 'mouseenter click' | 'manual'
  hideOnClick: true,             // true | false | 'toggle'
  showOnCreate: false,

  // Behavior
  interactive: false,            // keep open when hovering inside tooltip
  interactiveBorder: 2,          // px size of invisible hover buffer
  interactiveDebounce: 0,        // ms debounce for interactive hide
  delay: [100, 200],             // [showDelay, hideDelay] in ms
  duration: [300, 250],          // [showDuration, hideDuration] in ms

  // Positioning
  offset: [0, 10],               // [skidding, distance] in px
  appendTo: () => document.body, // 'parent' | Element | () => Element
  popperOptions: {               // raw Popper.js v2 options
    strategy: 'fixed',
  },

  // Visuals
  arrow: true,                   // true | false | svgString | Element
  theme: 'light',                // '' | 'light' | 'light-border' | 'material' | 'translucent' | custom
  animation: 'fade',             // 'fade' | 'shift-away' | 'scale' | 'perspective' | custom
  maxWidth: 350,                 // number | 'none'
  zIndex: 9999,

  // Plugins (pre-included)
  followCursor: false,           // true | 'horizontal' | 'vertical' | 'initial'
  sticky: false,                 // true | 'reference' | 'popper'
  inlinePositioning: false,
  animateFill: false,

  // Lifecycle hooks
  onCreate(instance) {},
  onMount(instance) {},
  onShow(instance) {},           // return false to cancel show
  onShown(instance) {},
  onHide(instance) {},           // return false to cancel hide
  onHidden(instance) {},
  onDestroy(instance) {},
  onTrigger(instance, event) {},
  onUntrigger(instance, event) {},
  onClickOutside(instance, event) {},
  onAfterUpdate(instance, partialProps) {},
  onBeforeUpdate(instance, partialProps) {}
})
```

--------------------------------

### onShown

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/props.md

Callback invoked once the tippy has fully transitioned in. Note that this relies on CSS `transitionend` and may need manual invocation with custom render functions.

```APIDOC
## onShown

Invoked once the tippy has been fully transitioned in.

<alert type="info">Since this is achieved via CSS `transitionend`, it relies on your own event listeners if using a custom `render` function. You'll need to call the lifecycle manually in this case.</alert>

```js
useTippy(target, {
  onShown(instance) {
    // ...
  },
})
```
```

--------------------------------

### themes

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/props.md

Applies a theme to the tippy element. Custom themes can be defined and applied here. The default theme is dark.

```APIDOC
## themes

Determines the theme of the tippy element. The core CSS defaults to a dark `#333` theme. This can be overridden by a custom theme. See [Themes](/themes) for details.

```js
useTippy(target, {
  // default
  theme: '',
  // custom theme
  theme: 'tomato',
})
```
```

--------------------------------

### Basic Vue-Tippy Composition API Usage

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/flavor/composition-api.md

Use the `useTippy` composable to attach a basic tooltip to an element referenced by `ref`. Ensure the element is mounted before calling `useTippy`.

```vue
<template>
  <button ref="btn">Tippy!</button>
</template>

<script setup>
import { useTippy } from 'vue-tippy'
const btn = ref()

useTippy(btn, {
  content: 'Hello!',
})
</script>
```

--------------------------------

### Create Custom Theme CSS

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/themes.md

Define custom theme styles by targeting the '.tippy-box' element with a data attribute for the theme name.

```css
.tippy-box[data-theme~='tomato'] {
  background-color: tomato;
  color: yellow;
}
```

--------------------------------

### Configuring allowHTML

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/props.md

Control whether content strings are parsed as HTML or plain text. Set to `true` to enable HTML parsing.

```js
useTippy(target, {
  // default
  allowHTML: false,
  // parse `content` strings as HTML
  allowHTML: true,
})
```

--------------------------------

### Configuring the arrow

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/props.md

Determines if the tippy should display an arrow. Requires theme or specific arrow styling.

```js
useTippy(target, {
  // default
  arrow: true,
  // disable arrow
  arrow: false,
  // custom arrow string
  arrow: '<svg>...</svg>',
  // custom arrow element
  arrow: svgElement,
})
```

--------------------------------

### Basic Vue-Tippy Directive Usage

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/flavor/directive.md

Use the `v-tippy` directive with a simple string to display a basic tooltip on an element. No additional imports are required for basic usage.

```html
<button v-tippy="'Hello!'">
  Tippy!
</button>
```

--------------------------------

### Applying CSS Animations with onMount and onHidden

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/animations.md

Integrate external CSS animations (like those from animate.css) by adding and removing animation classes to the tippy's popper element within the `onMount` and `onHidden` lifecycle hooks.

```javascript
useTippy(target, {
  onMount(instance) {
    const box = instance.popper.firstElementChild
    requestAnimationFrame(() => {
      box.classList.add('animated')
      box.classList.add('wobble')
    })
  },
  onHidden(instance) {
    const box = instance.popper.firstElementChild
    box.classList.remove('animated')
    box.classList.remove('wobble')
  },
})
```

--------------------------------

### Tippy Directive and Component Usage

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/props.md

Illustrates how to apply Tippy using the v-tippy directive or the Tippy component in Vue.js.

```html
<!-- Tippy Directive -->
<button v-tippy="props">Hello</button>
```

```html
<!-- Tippy Component -->
<tippy prop1 prop2 ...>
  <button>World!</button>
</tippy>
```

--------------------------------

### Configuring appendTo

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/props.md

Specifies the DOM element to which the tippy should be appended. Useful for managing accessibility, clipping, or z-index issues.

```js
useTippy(target, {
  // default (takes reference as an argument)
  appendTo: () => document.body,
  // append to reference's parentNode
  appendTo: 'parent',
  // append to an Element
  appendTo: element,
})
```

--------------------------------

### Import SVG Arrow Stylesheet

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/themes.md

Import the 'svg-arrow.css' stylesheet to enable styling for SVG arrows.

```javascript
import 'tippy.js/dist/svg-arrow.css'
```

--------------------------------

### Add vue-tippy Dependency

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/installation.md

Use Yarn or NPM to add the vue-tippy dependency to your project.

```bash
yarn add vue-tippy@v6
```

```bash
npm install vue-tippy@v6
```

--------------------------------

### Applying a Scale Animation

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/animations.md

Pass the animation name as a string to the `animation` prop when initializing Vue-Tippy. Ensure the corresponding CSS has been imported.

```javascript
useTippy(target, {
  animation: 'scale',
})
```

--------------------------------

### content

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/props.md

Sets the content of the tippy, which can be a string, HTML element, or a function returning content.

```APIDOC
## content

The content of the tippy.

```js
useTippy(target, {
  // default
  content: '',
  // string
  content: 'Hello',
  // Element
  content: document.createElement('div'),
  // (reference) => string | Element
  content: reference => reference.getAttribute('title'),
  // using a ref value
  // import { ref } from 'vue'
  // const refContent = ref("Hi!")
  content: refContent,
  // using a computed property
  content: computed(() => `(${x.value},${y.value})`),
  // Render function
  content: h('h1', 'Hello'),
  // Vue Component without props
  content: VueComponent,
  // Vue Component with props
  content: h(VueComponent, { message: 'Hello' }),
  // Vue Component with reactive props
  content: computed(() =>
    h(Counter, { onClick: () => counter.value++ }, 'Click Me!')
  ),
  // using define component
  content: defineComponent(() => {
    return () => h('p', 'Hellooooo')
  }),
})
```
```

--------------------------------

### Mount Tippy on Child Node

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/flavor/component.md

Configures the Tippy component to mount on the child node instead of using the default wrapper tag. Set the `tag` prop to `null`.

```html
<tippy content="Hi!" :tag="null">
  <button>Tippy!</button>
</tippy>
```

--------------------------------

### Theme Customization

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/props.md

Sets the theme for the tippy element. The default theme is dark. Custom themes can be applied by specifying their name.

```javascript
useTippy(target, {
  // default
  theme: '',
  // custom theme
  theme: 'tomato',
})
```

--------------------------------

### Custom Popper Options

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/props.md

Allows for full control over tippy positioning by providing custom Popper.js options. This is useful for advanced scenarios like fixed strategies or custom fallback placements.

```javascript
useTippy(target, {
  // default
  popperOptions: {},
  // detailed example
  popperOptions: {
    strategy: 'fixed',
    modifiers: [
      {
        name: 'flip',
        options: {
          fallbackPlacements: ['bottom', 'right'],
        },
      },
      {
        name: 'preventOverflow',
        options: {
          altAxis: true,
          tether: false,
        },
      },
    ],
  },
})
```

--------------------------------

### Import Border Stylesheet

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/themes.md

Import the 'border.css' stylesheet to enable color inheritance for borders on CSS arrows and assist with SVG arrow borders.

```javascript
import 'tippy.js/dist/border.css'
```

--------------------------------

### Sticky Positioning

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/props.md

Enables the tippy to stick to the reference element while mounted, useful for animating reference elements or when DOM layout changes require automatic position updates. Has a performance cost and should be used judiciously.

```javascript
useTippy(target, {
  // default
  sticky: false,
  // enable it
  sticky: true,
  // only check the "reference" rect for changes
  sticky: 'reference',
  // only check the "popper" rect for changes
  sticky: 'popper',
})
```

--------------------------------

### appendTo

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/props.md

Specifies the DOM element to which the tippy should be appended. Defaults to 'parent' when interactive is true.

```APIDOC
## appendTo

The element to append the tippy to. If `interactive: true`, the default behavior is `appendTo: "parent"`.

Sometimes the tippy needs to be appended to a different DOM context due to accessibility, clipping, or z-index issues.

```js
useTippy(target, {
  // default (takes reference as an argument)
  appendTo: () => document.body,
  // append to reference's parentNode
  appendTo: 'parent',
  // append to an Element
  appendTo: element,
})
```
```

--------------------------------

### Customizing Tippy Wrapper Tags and Classes

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/flavor/component.md

Illustrates how to customize the wrapper tags and classes for the Tippy component's content. Use `tag`, `content-tag`, and `content-class` props for this.

```html
<tippy tag="button" content-tag="div" content-class="content-wrapper">
  <template #default>Tippy!</template>
  <template #content>Hi!</template>
</tippy>
```

--------------------------------

### Vue Component Usage

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/basic-usage.md

Utilize the `<tippy>` component for a more declarative approach to adding tooltips. Content can be passed as a prop or via a scoped slot.

```html
<template>
  <tippy content="Hi!">
    <button>Tippy!</button>
  </tippy>

  <tippy>
    <button>Tippy!</button>

    <template #content>
      Hi!
    </template>
  </tippy>
</template>

<!-- 
  The below is optional in case you 
  installed the plugin globally
 -->
<script>
  import { Tippy } from 'vue-tippy'

  export default {
    components: [Tippy],
  }
</script>
```

--------------------------------

### Importing a Scale Animation

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/animations.md

Import the CSS file for the desired animation. This makes the animation styles available for use.

```javascript
import 'tippy.js/animations/scale.css'
```

--------------------------------

### Advanced Tippy Component with State and Interaction

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/flavor/component.md

Shows an advanced configuration for the Tippy component, enabling interactivity, custom content slots, and state change handling. The `hide-on-click` prop is set to `false` to keep the tooltip visible when clicking inside it.

```html
<tippy
    arrow
    interactive
    :hide-on-click="false"
    @state="onStateChange"
>
  <template #default="{ state }">
    <div>
      <h1>Tippy!</h1>
      <p>{{ state }}</p>
    </div>
  </template>

  <template #content="{ hide }">
    Hi! <button @click="hide()">X</button>
  </template>
</tippy>
```

--------------------------------

### Placement Options

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/props.md

Specifies the preferred placement of the tippy. Popper's `flip` modifier may override this if space is limited. Supports various directional and automatic placements.

```javascript
useTippy(target, {
  // default
  placement: 'top',

  // full list:
  placement: 'top-start',
  placement: 'top-end',

  placement: 'right',
  placement: 'right-start',
  placement: 'right-end',

  placement: 'bottom',
  placement: 'bottom-start',
  placement: 'bottom-end',

  placement: 'left',
  placement: 'left-start',
  placement: 'left-end',

  // choose the side with most space
  placement: 'auto',
  placement: 'auto-start',
  placement: 'auto-end',
})
```

--------------------------------

### ignoreAttributes

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/props.md

When using UI (component) libraries like Vue, this is generally not necessary and slows down initialization perf a bit. Set to false to consider `data-tippy-*` attributes on the reference element.

```APIDOC
## ignoreAttributes

When using UI (component) libraries like Vue, this is generally not necessary and slows down initialization perf a bit.

```js
useTippy(target, {
  // default
  ignoreAttributes: true,
  // consider `data-tippy-*` attributes on the reference element
  ignoreAttributes: false,
})
```
```

--------------------------------

### followCursor

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/props.md

Determines if the tippy should follow the user's mouse cursor.

```APIDOC
## followCursor

Determines if the tippy follows the user's mouse cursor.

```js
useTippy(target, {
  // default
  followCursor: false,
  // follow on both x and y axes
  followCursor: true,
  // follow on x axis
  followCursor: 'horizontal',
  // follow on y axis
  followCursor: 'vertical',
  // follow until it shows (taking into account `delay`)
  followCursor: 'initial',
})
```
```

--------------------------------

### Enabling followCursor

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/props.md

Determines if the tippy should follow the user's mouse cursor. Supports 'horizontal', 'vertical', 'initial', or boolean values.

```js
useTippy(target, {
  // default
  followCursor: false,
  // follow on both x and y axes
  followCursor: true,
  // follow on x axis
  followCursor: 'horizontal',
  // follow on y axis
  followCursor: 'vertical',
  // follow until it shows (taking into account `delay`)
  followCursor: 'initial',
})
```

--------------------------------

### `TippySingleton` Component

Source: https://context7.com/kabbouchi/vue-tippy/llms.txt

Groups multiple `<Tippy>` children under one shared tooltip instance that transitions between them using a single popover, enabling a smooth animated "move" effect.

```APIDOC
## `<TippySingleton>` Component

Groups multiple `<Tippy>` children under one shared tooltip instance that transitions between them using a single popover, enabling a smooth animated "move" effect.

```html
<template>
  <TippySingleton
    move-transition="transform 0.2s ease-out"
    placement="top"
    arrow
  >
    <Tippy content="Tooltip for Button 1">
      <button>Button 1</button>
    </Tippy>
    <Tippy content="Tooltip for Button 2">
      <button>Button 2</button>
    </Tippy>
    <Tippy content="Tooltip for Button 3">
      <button>Button 3</button>
    </Tippy>
  </TippySingleton>
</template>

<script setup>
import { Tippy, TippySingleton } from 'vue-tippy'
import 'tippy.js/dist/tippy.css'
</script>
```
```

--------------------------------

### Configure interactiveBorder

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/props.md

Set the size of the invisible border around the tippy that prevents it from hiding when the cursor leaves the tippy's interactive region. Defaults to 2px.

```javascript
useTippy(target, {
  // default
  interactiveBorder: 2,
  // 30px
  interactiveBorder: 30,
})
```

--------------------------------

### popperOptions

Source: https://github.com/kabbouchi/vue-tippy/blob/main/docs/content/en/props.md

Allows custom configuration of Popper.js options for precise control over positioning. Refer to Popper.js v2 documentation for details.

```APIDOC
## popperOptions

Specifies custom Popper options. This gives you full control over the tippy's positioning. See [Popper's docs](https://popper.js.org/docs/v2/) for details.

```js
useTippy(target, {
  // default
  popperOptions: {},
  // detailed example
  popperOptions: {
    strategy: 'fixed',
    modifiers: [
      {
        name: 'flip',
        options: {
          fallbackPlacements: ['bottom', 'right'],
        },
      },
      {
        name: 'preventOverflow',
        options: {
          altAxis: true,
          tether: false,
        },
      },
    ],
  },
})
```
```