### Install floating-vue

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/index.md

Install the floating-vue package using your preferred package manager (npm, yarn, or pnpm). This is the first step to integrate the library into your Vue project.

```bash
npm i floating-vue
```

```bash
yarn add floating-vue
```

```bash
pnpm add floating-vue
```

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

### Setup and Run Demo

Source: https://github.com/akryum/floating-vue/blob/main/CONTRIBUTING.md

Navigates into the demo source directory, installs its dependencies using Yarn, and then runs the demo application in development mode using pnpm.

```shell
cd demo-src
yarn
pnpm run dev
```

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

### Install Dependencies

Source: https://github.com/akryum/floating-vue/blob/main/CONTRIBUTING.md

Installs project dependencies using Yarn. This is typically the first step before running any commands.

```shell
yarn
```

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

### Floating Vue Component Tooltip Example

Source: https://github.com/akryum/floating-vue/blob/main/docs/migration/migration-from-v2.md

Shows how to use the VTooltip component with props for triggers and distance. Requires Floating Vue installation.

```html
<VTooltip
  :triggers="['click']"
  :distance="12"
>
  <button>Action</button>
</VTooltip>
```

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

### Install Floating Vue with Options

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/config.md

Demonstrates how to install Floating Vue globally using `Vue.use` and pass configuration options to set default values for all components and directives.

```javascript
import FloatingVue from 'floating-vue'
Vue.use(FloatingVue, options)
```

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

### Install Dependencies (Yarn)

Source: https://github.com/akryum/floating-vue/blob/main/demo/README.md

Installs all project dependencies required for development and production. This command reads the 'dependencies' and 'devDependencies' from the package.json file.

```shell
yarn install
```

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

### Use FloatingVue Plugin

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/index.md

Register the FloatingVue plugin globally in your Vue application. This makes directives and components available throughout your app.

```javascript
import FloatingVue from 'floating-vue'

app.use(FloatingVue)
```

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

### Add Default Styles

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/index.md

Import the default CSS file provided by floating-vue to apply base styling for tooltips and poppers. This is typically done once in your main application entry point.

```javascript
import 'floating-vue/dist/style.css'
```

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

### Custom Theme Configuration Example

Source: https://github.com/akryum/floating-vue/blob/main/docs/migration/migration-from-v2.md

Provides an example of how to configure custom themes for Floating Vue components, including extending existing themes and setting default props.

```javascript
app.use(FloatingVue, {
  themes: {
    select: {
      $extend: 'dropdown', // builtin theme
      triggers: ['click', 'touch', 'hover', 'focus'],
      distance: 6,
      delay: 0,
    },
    'multi-select': {
      $extend: 'select',
      triggers: ['click', 'touch'],
      distance: 10,
    },
  },
})
```

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

### Install Floating Vue with npm, yarn, or pnpm

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/installation.md

Installs the floating-vue package using different package managers. This is the primary method for Node.js environments.

```bash
npm i floating-vue
```

```bash
yarn add floating-vue
```

```bash
pnpm add floating-vue
```

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

### Floating Vue Directive Tooltip Example

Source: https://github.com/akryum/floating-vue/blob/main/docs/migration/migration-from-v2.md

Demonstrates using the v-tooltip directive with custom triggers and distance. Requires Floating Vue installation.

```html
<button v-tooltip="{
  triggers: ['click'],
  distance: 12,
}">Action</button>
```

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

### Install Floating Vue for Vue 2

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/installation.md

Installs version 1.x of floating-vue, which is compatible with Vue 2, using package managers.

```bash
npm i floating-vue@vue2
```

```bash
yarn add floating-vue@vue2
```

```bash
pnpm add floating-vue@vue2
```

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

### Serve for Development (Yarn)

Source: https://github.com/akryum/floating-vue/blob/main/demo/README.md

Compiles the project with hot-reloading enabled, making it suitable for active development. This command typically starts a local development server.

```shell
yarn serve
```

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

### Basic Theme Styling Example

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/css.md

Provides an example of applying basic CSS styles, such as padding, to a specific theme like 'dropdown' by targeting the '.v-popper__inner' element.

```css
.v-popper--theme-dropdown .v-popper__inner {
  padding: 6px;
}
```

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

### v-tooltip Directive Usage

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/index.md

Apply the `v-tooltip` directive to any HTML element to display a tooltip. The tooltip content can be a static string or a dynamic expression.

```html
<button v-tooltip="'You have ' + count + ' new messages.'">
  Hover me
</button>
```

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

### Configure Floating Vue Options

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/installation.md

Shows how to access and modify the global options for Floating Vue, such as defining custom themes.

```javascript
import { options } from 'floating-vue'

options.themes.myTheme = {
  // ...
}
```

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

### VDropdown and VMenu Component Usage

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/index.md

Use the `VDropdown` or `VMenu` components to create interactive dropdowns or context menus. The target element is the default slot, and the popper content is placed in the `#popper` template slot.

```html
<VDropdown>
  <!-- This will be the popover target (for the events and position) -->
  <button>Click me</button>
  <!-- This will be the content of the popover -->
  <template #popper>
    <MyAwesomeComponent/>
  </template>
</VDropdown>
```

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

### Global Configuration Options Migration

Source: https://github.com/akryum/floating-vue/blob/main/docs/migration/migration-from-v2.md

Details the changes in global configuration options between v-tooltip v2 and floating-vue. It maps deprecated options to their new equivalents and provides 'before' and 'after' examples of the configuration object structure.

```APIDOC
Global Configuration Options Migration:

Mapping of v-tooltip v2 global options to floating-vue:
- defaultPlacement -> placement
- defaultClass -> removed
- defaultTargetClass -> removed
- defaultHtml -> html in the 'tooltip' theme
- defaultTemplate -> removed
- defaultArrowSelector -> removed
- defaultInnerSelector -> removed
- defaultDelay -> delay
- defaultTrigger -> triggers, showTriggers, hideTriggers
- defaultOffset -> distance and/or skidding
- defaultContainer -> container
- defaultBoundariesElement -> boundary
- defaultPopperOptions -> removed
- defaultLoadingClass -> removed
- defaultLoadingContent -> loadingContent in the 'tooltip' theme
- autoHide -> autoHide (unchanged)
- defaultHideOnTargetClick -> hideTriggers
- disposeTimeout -> disposeTimeout (unchanged)
- popover -> removed, use themes instead

Before (v-tooltip v2):
```js
{
  defaultPlacement: 'top',
  defaultClass: 'vue-tooltip-theme',
  defaultTargetClass: 'has-tooltip',
  defaultHtml: true,
  defaultTemplate: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
  defaultArrowSelector: '.tooltip-arrow, .tooltip__arrow',
  defaultInnerSelector: '.tooltip-inner, .tooltip__inner',
  defaultDelay: 0,
  defaultTrigger: 'hover focus',
  defaultOffset: 0,
  defaultContainer: 'body',
  defaultBoundariesElement: undefined,
  defaultPopperOptions: {},
  defaultLoadingClass: 'tooltip-loading',
  defaultLoadingContent: '...',
  autoHide: true,
  defaultHideOnTargetClick: true,
  disposeTimeout: 5000,
  popover: {
    defaultPlacement: 'bottom',
    defaultClass: 'vue-popover-theme',
    defaultBaseClass: 'tooltip popover',
    defaultWrapperClass: 'wrapper',
    defaultInnerClass: 'tooltip-inner popover-inner',
    defaultArrowClass: 'tooltip-arrow popover-arrow',
    defaultOpenClass: 'open',
    defaultDelay: 0,
    defaultTrigger: 'click',
    defaultOffset: 0,
    defaultContainer: 'body',
    defaultBoundariesElement: undefined,
    defaultPopperOptions: {},
    defaultAutoHide: true,
    defaultHandleResize: true,
  },
}
```

After (floating-vue):
```js
{
  placement: 'top',
  delay: 0,
  distance: 0,
  container: 'body',
  boundary: undefined,
  autoHide: true,
  disposeTimeout: 5000,
  themes: {
    tooltip: {
      html: true,
      triggers: ['hover', 'focus'],
      hideTriggers: triggers => [...triggers, 'click'],
      loadingContent: '...',
    },
    dropdown: {
      placement: 'bottom',
      delay: 0,
      triggers: ['click'],
      distance: 0,
      container: 'body',
      boundary: undefined,
      autoHide: true,
      handleResize: true,
    },
  },
}
```
```

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

### Include Floating Vue via CDN for Browser

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/installation.md

Includes the Floating Vue library directly in an HTML page using a CDN link. This is suitable for simple browser-based projects without a build step.

```html
<script src="https://unpkg.com/floating-vue@^2.0.0-beta.1"></script>
```

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

### Include Floating Vue Default CSS

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/installation.md

Imports the default stylesheet for Floating Vue components and tooltips. This is essential for the visual styling to apply correctly.

```javascript
import 'floating-vue/dist/style.css'
```

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

### Import Floating Vue Directives and Components Directly

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/installation.md

Imports specific directives (like v-tooltip) and components (like Dropdown, Tooltip, Menu) from Floating Vue for direct use in your Vue application.

```javascript
import {
  // Directives
  vTooltip,
  vClosePopper,
  // Components
  Dropdown,
  Tooltip,
  Menu
} from 'floating-vue'

app.directive('tooltip', vTooltip)
app.directive('close-popper', vClosePopper)

app.component('VDropdown', Dropdown)
app.component('VTooltip', Tooltip)
app.component('VMenu', Menu)
```

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

### Install Floating Vue Plugin in Vue 2 App

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/installation.md

Integrates the Floating Vue plugin globally into a Vue 2 application instance using Vue.prototype or Vue.use.

```javascript
import Vue from 'vue'
import FloatingVue from 'floating-vue'

Vue.use(FloatingVue)
```

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

### Apply Custom Padding to Dropdown Theme

Source: https://github.com/akryum/floating-vue/blob/main/docs/migration/migration-from-v3.md

Provides an example of how to add custom padding to the default `dropdown` theme using CSS, as the default padding has been removed.

```css
.v-popper--theme-dropdown .v-popper__inner {
  padding: 6px;
}
```

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

### Directly Use Directives and Components in Vue Template

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/installation.md

Demonstrates how to import and use Floating Vue directives and components directly within a Vue Single File Component (SFC).

```vue
<script setup>
import { Dropdown, Tooltip, Menu, vTooltip } from 'floating-vue'
</script>

<template>
  <Dropdown>
    <button>Click me</button>
  </Dropdown>

  <Tooltip>
    <a>Sponsor me</a>
  </Tooltip>

  <Menu>
    <button>Documentation</button>
  </Menu>

  <button v-tooltip="msg">Hover me</button>
</template>
```

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

### Install Floating Vue Plugin in Vue App

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/installation.md

Integrates the Floating Vue plugin globally into your Vue application instance. This makes directives and components available throughout the app.

```javascript
import FloatingVue from 'floating-vue'

app.use(FloatingVue)
```

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

### Import Directives and Components Directly for Vue 2

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/installation.md

Imports specific directives and components from Floating Vue for direct use within a Vue 2 application.

```javascript
import Vue from 'vue'
import {
  // Directives
  vTooltip,
  vClosePopper,
  // Components
  Dropdown,
  Tooltip,
  Menu
} from 'floating-vue'

Vue.directive('tooltip', vTooltip)
Vue.directive('close-popper', vClosePopper)

Vue.component('VDropdown', Dropdown)
Vue.component('VTooltip', Tooltip)
Vue.component('VMenu', Menu)
```

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

### Floating Vue Tooltip Component

Source: https://github.com/akryum/floating-vue/blob/main/docs/migration/migration-from-v2.md

Example of using the VTooltip component with the 'tooltip' theme. It displays information in a Popper when the button is hovered.

```html
<!-- 'tooltip' theme -->
<VTooltip>
  <button>Hover me!</button>
  <template #popper>
    Some information
  </template>
</VTooltip>
```

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

### v-tooltip Manual Trigger Example

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/directive.md

Demonstrates how to manually control the tooltip's visibility using the `shown` and `triggers` options, which are part of the underlying popper component.

```html
<button
  v-tooltip="{
    content: 'Tooltip content here',
    shown: isOpen,
    triggers: [],
  }">
A button
</button>
```

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

### Include Floating Vue CSS via CDN for Browser

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/installation.md

Links the default Floating Vue stylesheet from a CDN in an HTML page. This ensures the library's styles are applied in browser environments.

```html
<link rel="stylsheet" href="https://unpkg.com/floating-vue@^2.0.0-beta.1/dist/style.css" />
```

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

### Modify Global Configuration

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/config.md

Shows how to directly update global configuration options for Floating Vue after installation by accessing the `FloatingVue.options` object.

```javascript
import FloatingVue from 'floating-vue'
FloatingVue.options.distance = 12
```

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

### Floating Vue Dropdown Component

Source: https://github.com/akryum/floating-vue/blob/main/docs/migration/migration-from-v2.md

Example of using the VDropdown component with the 'dropdown' theme. It displays content in a Popper when the button is clicked.

```html
<!-- 'dropdown' theme -->
<VDropdown>
  <button>Click me!</button>
  <template #popper>
    Nice job!
  </template>
</VDropdown>
```

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

### Floating Vue Menu Component

Source: https://github.com/akryum/floating-vue/blob/main/docs/migration/migration-from-v2.md

Example of using the VMenu component with the 'menu' theme. It displays content in a Popper when the button is hovered.

```html
<!-- 'menu' theme -->
<VMenu>
  <button>Hover me!</button>
  <template #popper>
    More buttons here
  </template>
</VMenu>
```

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

### Vue Layout with VitePress Navigation

Source: https://github.com/akryum/floating-vue/blob/main/docs/theme-editor.md

Demonstrates a Vue 3 layout structure using VitePress navigation (`VPNav`) and a client-only theme editor. It applies specific Tailwind CSS classes for styling and ensures the navigation is relative and the curtain is hidden.

```vue
<script setup>
import VPNav from 'vitepress/dist/client/theme-default/components/VPNav.vue'
</script>


<ClientOnly>
  <div class="h-screen grid grid-rows-[max-content_1fr]">
    <VPNav class="!relative [&_.container>.title]:!pl-6 [&_.container>.content]:!pr-6 [&_.title]:border-none [&_.curtain]:hidden" />
    <ThemeEditorVue />
  </div>
</ClientOnly>
```

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

### Add Floating Vue Nuxt 3 Module

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/installation.md

Configures a Nuxt 3 project to use Floating Vue by adding the official Nuxt module to the nuxt.config file.

```javascript
export default defineNuxtConfig({
  modules: [
    'floating-vue/nuxt'
  ]
})
```

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

### HTML with data-popper-shown Attribute

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/css.md

Shows an example of an HTML element that has the `data-popper-shown` attribute. This attribute is automatically added to target elements when their associated popper is visible.

```html
<!-- Popper is shown -->
<button data-popper-shown="">
  Click me
</button>
```

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

### CSS for data-popper-shown Attribute

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/css.md

Provides a CSS example demonstrating how to style elements based on the presence of the `data-popper-shown` attribute. This allows for conditional styling when a popper is active.

```css
button[data-popper-shown] {
  background: #f00;
}
```

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

### HTML for VDropdown Component

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/css.md

Example usage of the VDropdown component with the `compute-transform-origin` attribute, which influences how the popper's transform origin is calculated.

```html
<VDropdown compute-transform-origin />
```

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

### Full Custom Popper Example (Vue.js)

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/custom-component.md

A complete Vue.js component demonstrating how to create a custom popper using Floating Vue's `Popper` and `PopperContent` components, along with mixins and slots.

```Vue.js
<template>
  <Popper
    ref="popper"
    v-slot="{
      popperId,
      isShown,
      shouldMountContent,
      skipTransition,
      autoHide,
      hide,
      handleResize,
      onResize,
      classes,
      result,
    }"
    v-bind="$attrs"
    :theme="theme"
    :target-nodes="getTargetNodes"
    :reference-node="() => $refs.reference"
    :popper-node="() => $refs.popperContent.$el"
  >
    <div
      ref="reference"
      class="v-popper"
      :class="[
        themeClass,
        {
          'v-popper--shown': isShown,
        },
      ]"
    >
      <slot />

      <PopperContent
        ref="popperContent"
        :popper-id="popperId"
        :theme="theme"
        :shown="isShown"
        :mounted="shouldMountContent"
        :skip-transition="skipTransition"
        :auto-hide="autoHide"
        :handle-resize="handleResize"
        :classes="classes"
        :result="result"
        @hide="hide"
        @resize="onResize"
      >
        <slot
          name="popper"
          :shown="isShown"
        />
      </PopperContent>
    </div>
  </Popper>
</template>

<script>
import {
  Popper,
  PopperContent,
  PopperMethods,
  ThemeClass
} from 'floating-vue'

export default {
  name: 'VPopperWrapper',

  components: {
    Popper: Popper(),
    PopperContent,
  },

  mixins: [
    PopperMethods,
    ThemeClass(),
  ],

  inheritAttrs: false,

  props: {
    theme: {
      type: String,
      default () {
        return this.$options.vPopperTheme
      },
    },
  },

  methods: {
    getTargetNodes () {
      return Array.from(this.$refs.reference.children)
    },
  },
}
</script>

```

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

### Build Demo Application

Source: https://github.com/akryum/floating-vue/blob/main/CONTRIBUTING.md

Builds the demo application for production using pnpm. This command is used to create a deployable version of the demo.

```shell
pnpm run build
```

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

### Build for Production (Yarn)

Source: https://github.com/akryum/floating-vue/blob/main/demo/README.md

Compiles and minifies the project for production deployment. This process optimizes assets and bundles the application for efficient distribution.

```shell
yarn build
```

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

### Use VDropdown Component

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/component.md

Demonstrates the basic usage of the VDropdown component, including slots for reference and popper content, and passing props like distance.

```html
<VDropdown
  :distance="6"
>
  <!-- This will be the popover reference (for the events and position) -->
  <button>Click me</button>

  <!-- This will be the content of the popover -->
  <template #popper>
    <input class="tooltip-content" v-model="msg" placeholder="Tooltip content" />
    <p>
      {{ msg }}
    </p>

    <!-- You can put other components too -->
    <ExampleComponent char="=" />
  </template>
</VDropdown>
```

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

### Build Library for Production

Source: https://github.com/akryum/floating-vue/blob/main/CONTRIBUTING.md

Builds the Floating Vue library for production deployment using pnpm. This typically optimizes the code for performance and size.

```shell
pnpm run build
```

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

### Create and Destroy Tooltip (JavaScript)

Source: https://github.com/akryum/floating-vue/blob/main/docs/api/index.md

Demonstrates creating a tooltip programmatically on an element using `createTooltip` and destroying it with `destroyTooltip`. Includes showing, hiding, and handling transitions.

```js
import { createTooltip, destroyTooltip } from 'floating-vue'

export function clipboardSuccess (el) {
  const tooltip = createTooltip(el, {
    triggers: [],
    content: 'Text copied!',
  })
  tooltip.show()
  setTimeout(() => {
    tooltip.hide()
    // Transition
    setTimeout(() => {
      destroyTooltip(el)
    }, 400)
  }, 600)
}
```

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

### Use VTooltip Component

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/component.md

Shows how to use the VTooltip component for displaying tooltips with custom content, leveraging the 'popper' slot.

```html
<VTooltip>
  <a>Sponsor me</a>

  <template #popper>
    Help me fund my Open Source work!
  </template>
</VTooltip>
```

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

### Run End-to-End Tests (Yarn)

Source: https://github.com/akryum/floating-vue/blob/main/demo/README.md

Executes the project's end-to-end tests. These tests simulate user interactions to ensure the application functions correctly in a production-like environment.

```shell
yarn test:e2e
```

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

### v-tooltip Content Option (HTML)

Source: https://github.com/akryum/floating-vue/blob/main/docs/api/index.md

Demonstrates setting the tooltip content using the `content` option. Supports plain strings, functions returning content, and Promises for asynchronous loading.

```html
<template>
  <button v-tooltip="{ content: 'Hello world' }">
    Hover me
  </button>
</template>
```

```html
<template>
  <button v-tooltip="'Hello world'">
    Hover me
  </button>
</template>
```

```html
<template>
  <button v-tooltip="{ content: fetchTooltip }">
    Hover me
  </button>
</template>
```

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

### Build Library in Development Mode

Source: https://github.com/akryum/floating-vue/blob/main/CONTRIBUTING.md

Builds the Floating Vue library in development mode using pnpm. This is useful for testing changes locally with debugging enabled.

```shell
pnpm run dev
```

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

### v-tooltip Directive Basic Usage (HTML)

Source: https://github.com/akryum/floating-vue/blob/main/docs/api/index.md

Shows the basic usage of the `v-tooltip` directive in HTML templates. Options can be passed as an object.

```html
<button v-tooltip="{
  /* options */
}">
</button>
```

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

### v-tooltip Object Notation

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/directive.md

Explains how to use object notation for the v-tooltip directive to pass multiple configuration options, including component props and custom settings.

```html
<button v-tooltip="{ content: 'You have ' + count + ' new messages.' }">
</button>
```

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

### Basic v-tooltip Usage

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/directive.md

Demonstrates the basic usage of the v-tooltip directive with a static string content. The tooltip content can also be a reactive property.

```html
<button v-tooltip="'You have ' + count + ' new messages.'">
</button>
```

```html
<button v-tooltip="tooltipContent">
</button>
```

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

### Use VMenu Component

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/component.md

Illustrates the VMenu component, a variant of VDropdown with the 'menu' theme, suitable for hover interactions and displaying menu items.

```html
<VMenu>
  <button>Documentation</button>

  <template #popper>
    <button>Guide</button>
    <button>API Reference</button>
  </template>
</VMenu>
```

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

### v-tooltip Async Content

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/directive.md

Illustrates how to use asynchronous content for tooltips by providing a function that returns a promise. It also covers displaying loading states and passing custom arguments to the async method.

```html
<button
  v-tooltip="{
    content: asyncMethod,
    loadingContent: 'Please wait...', 
  }">
Hover me!
</button>
```

```html
<button
  v-tooltip="{
    content: () => asyncMethod('foo', 'bar'),
  }">
Hover me!
</button>
```

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

### Floating Vue CSS Import

Source: https://github.com/akryum/floating-vue/blob/main/docs/migration/migration-from-v2.md

Imports the necessary CSS file for Floating Vue components to function correctly. This should be done once in your application's entry point.

```js
import 'floating-vue/dist/style.css'
```

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

### Run Unit Tests

Source: https://github.com/akryum/floating-vue/blob/main/CONTRIBUTING.md

Executes the unit tests in watch mode using pnpm. This command is useful for development to continuously run tests as code changes.

```shell
pnpm run test:unit --watch
```

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

### v-tooltip Loading Content Option (HTML)

Source: https://github.com/akryum/floating-vue/blob/main/docs/api/index.md

Specifies content to display while the actual tooltip content is being fetched asynchronously. Works in conjunction with the `content` option that returns a Promise or function.

```html
<template>
  <button
    v-tooltip="{
      content: fetchTooltip,
      loadingContent: 'Loading tooltip...', 
    }"
  >
    Hover me
  </button>
</template>
```

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

### Component Usage: v-popper to VDropdown

Source: https://github.com/akryum/floating-vue/blob/main/docs/migration/migration-from-v2.md

Illustrates the change in component usage from the deprecated `<v-popper>` component in v-tooltip to the `<VDropdown>` component in floating-vue.

```html
<v-popper/>
```

```html
<VDropdown/>
```

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

### Lint and Fix Files (Yarn)

Source: https://github.com/akryum/floating-vue/blob/main/demo/README.md

Lints the project's code to enforce coding standards and automatically fixes common style issues. This command helps maintain code quality and consistency.

```shell
yarn lint
```

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

### Tooltip Loading HTML Structure Update

Source: https://github.com/akryum/floating-vue/blob/main/docs/migration/migration-from-v2.md

Illustrates the HTML structure change for tooltips when a loading state is active, showing the updated class names for the loading indicator.

```html
<div class="tooltip tooltip-loading" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">Loading...</div>
</div>
```

```html
<div class="v-popper__popper v-popper--theme-tooltip v-popper--tooltip-loading">
  <div class="v-popper__wrapper">
    <div class="v-popper__inner">
      <div>
        Loading...
      </div>
    </div>

    <div class="v-popper__arrow-container">
      <div class="v-popper__arrow-outer" />
      <div class="v-popper__arrow-inner" />
    </div>
  </div>
</div>
```

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

### VDropdown: Eagerly Mount Content with 'eagerMount'

Source: https://github.com/akryum/floating-vue/blob/main/docs/api/index.md

The 'eager-mount' property, when true, mounts the popper's content without waiting for the popper to be displayed.

```html
<VDropdown eager-mount />
```

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

### v-tooltip Directive API Changes

Source: https://github.com/akryum/floating-vue/blob/main/docs/migration/migration-from-v2.md

Details the changes to the v-tooltip directive's API, including renamed props, removed options, and changed defaults. This helps users adapt their directive usage.

```APIDOC
v-tooltip Directive API Changes:

Changed Defaults:
- `html` is now `false` by default to help prevent XSS attacks.

Renamed Props:
- `trigger` renamed to `triggers`.
- `show` renamed to `shown`.
- `boundariesElement` renamed to `boundary`.
- `classes` renamed to `popperClass`.

Removed Directive Options:
- `targetClasses`
- `template`
- `arrowSelector`
- `innerSelector`
- `hideOnTargetClick` (replaced by `hideTriggers`)
- `loadingClass`
```

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

### Tooltip HTML Structure Update

Source: https://github.com/akryum/floating-vue/blob/main/docs/migration/migration-from-v2.md

Compares the HTML output of the v-tooltip directive before and after updates, showing the transition from a 'tooltip' class structure to 'v-popper' classes.

```html
<div class="tooltip" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">Text here</div>
</div>
```

```html
<div class="v-popper__popper v-popper--theme-tooltip">
  <div class="v-popper__wrapper">
    <div class="v-popper__inner">
      <div>
        Text here
      </div>
    </div>

    <div class="v-popper__arrow-container">
      <div class="v-popper__arrow-outer" />
      <div class="v-popper__arrow-inner" />
    </div>
  </div>
</div>
```

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

### Enable Auto Max Size for Popper

Source: https://github.com/akryum/floating-vue/blob/main/docs/migration/migration-from-v3.md

Demonstrates the usage of the `auto-max-size` prop to allow floating-vue to automatically resize the popper inner container to fit available space.

```vue
<VDropdown auto-max-size />
```

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

### Update Offset Props: Distance and Skidding

Source: https://github.com/akryum/floating-vue/blob/main/docs/migration/migration-from-v3.md

Demonstrates the change in handling positioning offsets from a single `offset` prop to separate `distance` and `skidding` props in VDropdown components.

```vue
<VDropdown
  :offset="[0, 10]"
/>
```

```vue
<VDropdown
  distance="10"
  skidding="0"
/>
```

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

### Apply Show Event

Source: https://github.com/akryum/floating-vue/blob/main/docs/api/index.md

Emitted after any configured delay for showing the popper has elapsed. This signifies that the popper is now visible and interactive.

```APIDOC
Event: apply-show
Description: Emitted after the show delay.
Parameters: None
Return Value: None
```

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

### Configure Arrow Padding Prop

Source: https://github.com/akryum/floating-vue/blob/main/docs/migration/migration-from-v3.md

Illustrates migrating the `arrow` modifier's `padding` option to the dedicated `arrow-padding` prop for better control over arrow spacing.

```vue
<VDropdown :modifiers="[ { name: 'arrow', options: { padding: 12 } } ]" />
```

```vue
<VDropdown :arrow-padding="12" />
```

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

### Advanced Theme Styling and Transitions

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/css.md

Illustrates comprehensive CSS styling for a custom theme ('my-theme'), including background, color, padding, borders, shadows, and transition effects for shown/hidden states and skipping transitions.

```css
.v-popper--theme-my-theme .v-popper__inner {
  background: #fff;
  color: black;
  padding: 24px;
  border-radius: 6px;
  border: 1px solid #ddd;
  box-shadow: 0 6px 30px rgba(0, 0, 0, .1);
}

.v-popper--theme-my-theme .v-popper__arrow-inner {
  visibility: visible;
  border-color: #fff;
}

.v-popper--theme-my-theme .v-popper__arrow-outer {
  border-color: #ddd;
}

/* Transition */

.v-popper--theme-my-theme.v-popper__popper--hidden {
  visibility: hidden;
  opacity: 0;
  transition: opacity .15s, visibility .15s;
}

.v-popper--theme-my-theme.v-popper__popper--shown {
  visibility: visible;
  opacity: 1;
  transition: opacity .15s;
}

.v-popper--theme-my-theme.v-popper__popper--skip-transition {
  transition: none !important;
}
```

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

### Use Custom Theme with v-tooltip

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/themes.md

Demonstrates how to apply the custom 'info-tooltip' theme to the `v-tooltip` directive, passing content and the theme name.

```html
<button v-tooltip="{
  content: 'You have ' + count + ' new messages.',
  theme: 'info-tooltip'
}">
  Notifications
</button>
```

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

### Floating Vue Compute Transform Origin

Source: https://github.com/akryum/floating-vue/blob/main/docs/migration/migration-from-v2.md

Enables computing the transform origin of the `.v-popper__wrapper` for effects like zooming relative to the reference element. Requires associated CSS.

```html
<template>
  <VDropdown compute-transform-origin />
</template>

<style>
.v-popper__wrapper {
  transition: transform .15s;
}

.v-popper__popper.v-popper__popper--hidden .v-popper__wrapper {
  transform: scale(.5);
}
</style>
```

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

### Floating Vue Global Configuration

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/config.md

Defines the default global configuration object for Floating Vue, detailing properties for popper behavior, positioning, themes, and more. This object serves as the blueprint for customizing the library's defaults.

```APIDOC
FloatingVueConfig:
  disabled: boolean
    Description: Disable popper components globally.
    Default: false
  distance: number
    Description: Default position offset along main axis (px).
    Default: 5
  skidding: number
    Description: Default position offset along cross axis (px).
    Default: 0
  container: string | HTMLElement
    Description: Default container where the popper will be appended.
    Default: 'body'
  boundary: string | HTMLElement | undefined
    Description: Element used to compute position and size boundaries.
    Default: undefined
  instantMove: boolean
    Description: Skip delay & CSS transitions when another popper is shown, so that the popper appears to instantly move to the new position.
    Default: false
  disposeTimeout: number
    Description: Auto destroy popper DOM nodes after a delay (ms).
    Default: 5000
  popperTriggers: string[]
    Description: Triggers applied on the popper itself.
    Default: []
  strategy: 'absolute' | 'fixed'
    Description: Positioning strategy.
    Default: 'absolute'
  preventOverflow: boolean
    Description: Prevent popper from overflowing its boundary.
    Default: true
  flip: boolean
    Description: Flip to the opposite placement if needed.
    Default: true
  shift: boolean
    Description: Shift on the cross axis to prevent the popper from overflowing.
    Default: true
  overflowPadding: number
    Description: Padding around the popper when preventing overflow (px).
    Default: 0
  arrowPadding: number
    Description: Padding for the arrow relative to the popper edge (px).
    Default: 0
  arrowOverflow: boolean
    Description: Compute arrow overflow (useful to hide it).
    Default: true
  autoHideOnMousedown: boolean
    Description: By default, compute autohide on 'click'. Set to true to autohide on mousedown.
    Default: false
  themes: {
    [themeName: string]: ThemeConfig
  }
    Description: Object containing theme configurations.

ThemeConfig:
  placement?: string
    Description: Default placement relative to target element.
    Default: 'top' (for tooltip), 'bottom' (for dropdown)
  triggers?: string[]
    Description: Default events that trigger the popper.
    Default: ['hover', 'focus', 'touch'] (for tooltip), ['click'] (for dropdown)
  hideTriggers?: (events: string[]) => string[]
    Description: Function to determine which events hide the popper.
    Default: events => [...events, 'click'] (for tooltip)
  delay?: number | { show: number, hide: number }
    Description: Delay (ms) for showing/hiding the popper.
    Default: { show: 200, hide: 0 } (for tooltip), 0 (for dropdown)
  handleResize?: boolean
    Description: Update popper on content resize.
    Default: false (for tooltip), true (for dropdown)
  html?: boolean
    Description: Enable HTML content in directive.
    Default: false
  loadingContent?: string
    Description: Displayed when tooltip content is loading.
    Default: '...'
  autoHide?: boolean
    Description: Hide on click outside.
    Default: true (for dropdown)
  $extend?: string
    Description: Extends properties from another theme.

```

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

### Configure Overflow Padding Prop

Source: https://github.com/akryum/floating-vue/blob/main/docs/migration/migration-from-v3.md

Illustrates migrating the `preventOverflow` modifier's `padding` option to the dedicated `overflow-padding` prop for better clarity.

```vue
<VDropdown :modifiers="[ { name: 'preventOverflow', options: { padding: 10 } } ]" />
```

```vue
<VDropdown :overflow-padding="10" />
```

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

### Arrow Modifier Replacement

Source: https://github.com/akryum/floating-vue/blob/main/docs/migration/migration-from-v2.md

Demonstrates how the 'arrow' modifier's padding option from popperjs is now managed by the 'arrowPadding' prop.

```html
<!-- Before -->
<VDropdown :popper-options="{
  modifiers: { arrow: { options: { padding: 12 } } }
}" />
```

```html
<!-- After -->
<VDropdown :arrow-padding="12" />
```

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

### VDropdown: Instant Movement with 'instantMove'

Source: https://github.com/akryum/floating-vue/blob/main/docs/api/index.md

Setting 'instant-move' to true skips delays and CSS transitions when another popper is open, making the popper appear to move instantly to its new position.

```html
<VDropdown instant-move />
```

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

### Customize VDropdown Triggers

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/component.md

Explains how to customize the trigger events for showing and hiding the popper using the 'triggers', 'showTriggers', and 'hideTriggers' props.

```html
<VDropdown
  :triggers="['hover', 'focus']"
>

<VDropdown
  :triggers="[]"
  :shown="isOpen"
  :autoHide="false"
>

<VDropdown
  :showTriggers="['hover']"
  :hideTriggers="['click']"
>

<VDropdown
  :triggers="['focus']"
  :showTriggers="triggers => [...triggers, 'hover']"
  :hideTriggers="triggers => [...triggers, 'click']"
>

<VDropdown
  :triggers="['hover']"
  :popperTriggers="['hover']"
>
```

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

### HTML with Tooltip Loading Class

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/css.md

Illustrates the HTML structure of a popper element when its tooltip content is actively loading. This state is indicated by the `v-popper--tooltip-loading` class on the popper's root element.

```html
<div class="v-popper__popper v-popper--tooltip-loading">
  <div class="v-popper__wrapper">
    <div class="v-popper__inner">
      <div>
        <!-- Tooltip text here -->
      </div>
    </div>

    <div class="v-popper__arrow-container">
      <div class="v-popper__arrow-outer" />
      <div class="v-popper__arrow-inner" />
    </div>
  </div>
</div>
```

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

### Configure VDropdown Offset

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/component.md

Demonstrates how to adjust the popper's position relative to the reference element using the 'distance' and 'skidding' props.

```html
<VDropdown
  :distance="64"
>

<VDropdown
  :skidding="32"
>

<VDropdown
  :distance="32"
  :skidding="-16"
>
```

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

### v-tooltip Styling Loading State

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/directive.md

Provides CSS to style the tooltip when it is in a loading state, using the `.v-popper--tooltip-loading` class.

```css
.v-popper--tooltip-loading .v-popper__inner {
  color: #77aaff;
}
```

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

### Show Event

Source: https://github.com/akryum/floating-vue/blob/main/docs/api/index.md

Emitted just before the popper element is scheduled to be shown. This event can be useful for performing actions or validations prior to the popper's appearance.

```APIDOC
Event: show
Description: Emitted when the popper is going to be shown.
Parameters: None
Return Value: None
```

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

### v-tooltip HTML Content Option (HTML)

Source: https://github.com/akryum/floating-vue/blob/main/docs/api/index.md

Enables rendering HTML content within the tooltip by setting the `html` prop to `true`. Use with caution to prevent XSS vulnerabilities.

```html
<template>
  <button v-tooltip="{ content: '<i>Italic</i>', html: true }">
    Hover me
  </button>
</template>
```

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

### Use Themed Component

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/themes.md

Demonstrates how to use the custom 'VInfoDropdown' component, providing a button as a trigger and content for the popper slot.

```html
<VInfoDropdown>
  <button>My customized dropdown</button>

  <template #popper>
    Hello world
  </template>
</VInfoDropdown>
```

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

### Apply Theme to v-tooltip Directive

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/themes.md

Demonstrates how to change the theme of the `v-tooltip` directive to 'dropdown' using the `theme` prop within the directive's configuration object.

```html
<button v-tooltip="{
  theme: 'dropdown'
}">
  Hover me
</button>
```

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

### Define Themed Component with Custom Theme

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/themes.md

Shows how to create a reusable component 'VInfoDropdown' that uses a custom theme 'info-dropdown'. It extends the 'dropdown' theme and sets specific options like `placement` and `delay`.

```javascript
Vue.use(FloatingVue, {
  themes: {
    'info-dropdown': {
      $extend: 'dropdown',
      placement: 'right',
      delay: 300,
    },
  },
})
```

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

### Define Custom Theme with CSS Reset

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/themes.md

Shows how to define a custom theme 'info-tooltip' that extends the default 'tooltip' theme but resets inherited CSS classes using `$resetCss: true`.

```javascript
Vue.use(FloatingVue, {
  themes: {
    'info-tooltip': {
      $extend: 'tooltip',
      $resetCss: true,
    },
  },
})
```

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

### Floating Vue Popper API Reference

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/custom-component.md

Details the building blocks for creating custom popper components in Floating Vue. Includes `Popper` component props and slots, `PopperContent` component props and events, and utility mixins for advanced customization.

```APIDOC
Floating Vue Popper Building Blocks:

- `Popper` (component): Main logic component integrating with Popper.js. Expects `inheritAttrs: true`. 
  Props:
    - `theme`: The currently applied theme.
    - `targetNodes`: Function returning target HTML elements that trigger the popper.
    - `referenceNode`: Function returning the reference HTML element for positioning.
    - `popperNode`: Function returning the popper HTML element for display.
  Exposes to default slot:
    - `popperId`: Unique ID for accessibility.
    - `isShown`: Boolean indicating if the popper is open.
    - `shouldMountContent`: Boolean to control content mounting.
    - `skipTransition`: Boolean to disable animations.
    - `autoHide`: Boolean for auto-hiding functionality.
    - `hide`: Method to hide the popper.
    - `handleResize`: Boolean for resizing detection.
    - `onResize`: Method to handle content size changes.
    - `classes`: Object with boolean flags for CSS classes.
    - `result`: Object with positioning data.

- `PopperContent` (component): Standard minimal popper content with containers and CSS classes.
  Props:
    - `popperId`: Unique ID for the popper.
    - `theme`: The currently applied theme.
    - `shown`: Boolean indicating if the popper is shown.
    - `mounted`: Boolean indicating if the content is mounted.
    - `skipTransition`: Boolean to skip transitions.
    - `autoHide`: Boolean for auto-hiding.
    - `handleResize`: Boolean for resize handling.
    - `classes`: Object with CSS class flags.
    - `result`: Object with positioning data.
  Events:
    - `hide`: Emitted when the popper should be hidden.
    - `resize`: Emitted when the popper content size changes.
  Refs:
    - `$refs.arrow`: The arrow element.
    - `$refs.inner`: The main styling div.

- `PopperMethods` (mixin): Forwards useful methods like `show` and `hide` to the underlying `<Popper>` component.

- `ThemeClass` (mixin): Computes final root CSS classes based on themes.
```

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

### Theme Class Generation

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/css.md

Demonstrates how to generate CSS theme classes based on theme names, including inheritance and resetting parent CSS.

```javascript
`(themeName) => `v-popper--theme-${themeName}``
```

```javascript
Vue.use(VTooltip, {
  themes: {
    'info-tooltip': {
      $extend: 'tooltip',
    },
  },
})

// themeClasses will be:
// [
//   'v-popper--theme-info-tooltip',
//   'v-popper--theme-tooltip',
// ]
```

```javascript
Vue.use(VTooltip, {
  themes: {
    'info-tooltip': {
      $extend: 'tooltip',
    },
    'other-tooltip': {
      $extend: 'info-tooltip',
    }
  },
})

// themeClasses will be:
// [
//   'v-popper--theme-other-tooltip',
//   'v-popper--theme-info-tooltip',
//   'v-popper--theme-tooltip',
// ]
```

```javascript
Vue.use(VTooltip, {
  themes: {
    'info-tooltip': {
      $extend: 'tooltip',
      $resetCss: true,
    },
  },
})

// themeClasses will be:
// [
//   'v-popper--theme-info-tooltip',
// ]
```

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

### Modify Theme Configuration

Source: https://github.com/akryum/floating-vue/blob/main/docs/guide/config.md

Illustrates how to change specific configuration options for a particular theme, like 'dropdown', by accessing nested theme properties within `FloatingVue.options`.

```javascript
import FloatingVue from 'floating-vue'
FloatingVue.options.themes.dropdown.distance = 12
```

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

### Default Slot Event/Attribute Handling

Source: https://github.com/akryum/floating-vue/blob/main/docs/migration/migration-from-v2.md

Demonstrates how event listeners and attributes are now applied directly to top-level elements within the default slot, rather than an internal div.

```html
<v-popper> <!-- Listeners & attributes added to internal div -->
  <button>Click me!</button>
  <button>Hey I'm another button!</button>

  <template #popover>
    Some info here
  </template>
</v-popper>
```

```html
<VDropdown>
  <button>Click me!</button> <!-- Listeners & attributes added here -->
  <button>Hey I'm another button!</button> <!-- Listeners & attributes added here -->

  <template #popper>
    Some info here
  </template>
</VDropdown>
```