Floating Vue

https://floating-vue.starpad.dev
Admin
Floating Vue is a Vue library for creating tooltips and dropdowns that position themselves perfectly...
Tokens:23,369
Snippets:302
Trust Score:6.3
Update:5 months ago
Show doc for...
Tokens:
Raw
### Install Floating Vue with Options

Source: https://floating-vue.starpad.dev/guide/config

Use the `Vue.use()` method with an options object to configure Floating Vue globally during installation.

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

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

### Install Floating Vue v1 for Vue 2 with npm

Source: https://floating-vue.starpad.dev/guide/installation

Install version 1 of floating-vue, specifically for compatibility with Vue 2 projects, using npm.

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

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

### Install Floating Vue v1 for Vue 2 with pnpm

Source: https://floating-vue.starpad.dev/guide/installation

Install version 1 of floating-vue, specifically for compatibility with Vue 2 projects, using pnpm.

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

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

### Install Floating Vue with npm

Source: https://floating-vue.starpad.dev/guide

Use this command to add the floating-vue package to your project using npm.

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

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

### Custom Theme Styling

Source: https://floating-vue.starpad.dev/guide/css

Provides a comprehensive example of styling a custom theme named `my-theme`, including background, borders, shadows, and arrow styles.

```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;
}
```

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

### Install Floating Vue with pnpm

Source: https://floating-vue.starpad.dev/guide

Use this command to add the floating-vue package to your project using pnpm.

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

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

### Global Configuration Migration: v-tooltip v2 to Floating Vue

Source: https://floating-vue.starpad.dev/migration/migration-from-v2

Compares the global configuration objects of v-tooltip v2 and floating-vue. Use the 'After' example to replicate v-tooltip v2's default configuration in floating-vue.

```javascript
{
  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,
  },
}
```

```javascript
{
  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,
    },
  },
}
```

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

### Define a Themed Component with Custom Options

Source: https://floating-vue.starpad.dev/guide/themes

Create a reusable component that uses a specific theme by extending `PopperWrapper` and setting `vPopperTheme`. This example defines an `info-dropdown` theme.

```js
Vue.use(FloatingVue, {
  themes: {
    'info-dropdown': {
      $extend: 'dropdown',
      // Other options (see the 'Global options' section)
      placement: 'right',
      delay: 300,
    },
  },
})

```

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

### Install Floating Vue v1 for Vue 2 with yarn

Source: https://floating-vue.starpad.dev/guide/installation

Install version 1 of floating-vue, specifically for compatibility with Vue 2 projects, using yarn.

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

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

### Install Floating Vue with yarn

Source: https://floating-vue.starpad.dev/guide

Use this command to add the floating-vue package to your project using yarn.

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

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

### Custom Popper Component Example

Source: https://floating-vue.starpad.dev/guide/custom-component

This example demonstrates how to create a custom wrapper component for Floating Vue's Popper and PopperContent, integrating mixins and props for theme and target nodes.

```html
<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>
```

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

### Mobile Poppers with Custom Logic

Source: https://floating-vue.starpad.dev/guide/component

This example demonstrates how to handle mobile popper behavior, including disabling positioning and applying custom CSS classes for fixed positioning and body scroll management.

```html
<script>
let count = 0

export default {
  data () {
    return {
      isMobile: false,
    }
  },

  methods: {
    onShow () {
      if (count === 0) {
        document.body.classList.add('no-scroll')
      }
      count++
    },

    onHide () {
      count--
      if (count === 0) {
        document.body.classList.remove('no-scroll')
      }
    },
  },
}
</script>

<template>
  <div class="example">
    <label>
      <input v-model="isMobile" type="checkbox">
      Is mobile
    </label>

    <VDropdown
      :positioning-disabled="isMobile"
      @apply-show="isMobile && onShow()"
      @apply-hide="isMobile && onHide()"
    >
      <button>Click me</button>

      <template #popper="{ hide }">
        <div>This is awesome!</div>
        <button v-if="isMobile" @click="hide()">Cancel</button>
      </template>
    </VDropdown>
  </div>
</template>

<style>
body.no-scroll {
  overflow: hidden;
}

.v-popper__popper--no-positioning {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.v-popper__popper--no-positioning .v-popper__backdrop {
  display: block;
  background: rgba(0 0 0 / 90%);
}

.v-popper__popper--no-positioning .v-popper__wrapper {
  width: 100%;
  pointer-events: auto;
  transition: transform .15s ease-out;
}

.v-popper__popper--no-positioning.v-popper__popper--hidden .v-popper__wrapper {
  transform: translateY(100%);
}
</style>
```

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

### Custom Theme Configuration

Source: https://floating-vue.starpad.dev/migration/migration-from-v2

Configure custom themes for floating components by extending existing themes or defining new ones with specific props and CSS classes. This example shows how to create a 'select' theme extending the 'dropdown' theme.

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

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

### Create and Manage Tooltip

Source: https://floating-vue.starpad.dev/api

Creates a tooltip on a given element and manages its lifecycle. Use `destroyTooltip` to clean up the tooltip when it's no longer needed. This example demonstrates creating a tooltip for a clipboard success message.

```javascript
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)
}
```

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

### Install plugin into Vue 2 app

Source: https://floating-vue.starpad.dev/guide/installation

Use the FloatingVue plugin with Vue 2 by importing it and calling `Vue.use()`.

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

Vue.use(FloatingVue)
```

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

### Install plugin in browser app

Source: https://floating-vue.starpad.dev/guide/installation

Use the FloatingVue plugin with your Vue app instance when including the script via CDN.

```javascript
app.use(FloatingVue)
```

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

### Import directives and components in Vue SFC

Source: https://floating-vue.starpad.dev/guide/installation

Import specific directives and components directly within a Vue Single File Component's script setup.

```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>
```

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

### Using Built-in Components (VDropdown, VMenu, VTooltip)

Source: https://floating-vue.starpad.dev/migration/migration-from-v2

Leverage pre-built components for common UI patterns like dropdowns, menus, and tooltips. Each component uses a template slot for the popper content.

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

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

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

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

### Enable Instant Move with `instantMove`

Source: https://floating-vue.starpad.dev/api

When another popper is open, use `instant-move` to skip delays and CSS transitions, making the popper appear to move instantly to its new position.

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

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

### Hide All Poppers

Source: https://floating-vue.starpad.dev/api

Call this function to hide all currently visible poppers. No specific setup is required.

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

hideAllPoppers()
```

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

### Basic v-tooltip directive usage

Source: https://floating-vue.starpad.dev/api

Demonstrates the basic structure for applying the v-tooltip directive to an HTML element. The directive accepts an object for options.

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

```

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

### Extend an Existing Theme with `$extend`

Source: https://floating-vue.starpad.dev/guide/themes

Create a new theme by extending an existing one, such as the default `tooltip` theme. This inherits all options and CSS classes from the parent theme.

```js
Vue.use(FloatingVue, {
  themes: {
    'info-tooltip': {
      $extend: 'tooltip',
      // Other options (see the 'Global options' section)
    },
  },
})

```

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

### Create a Reusable Themed Component

Source: https://floating-vue.starpad.dev/guide/themes

Build a custom component like `VInfoDropdown` by inheriting from `PopperWrapper` and setting `vPopperTheme`. Include component-specific styles within the `<style>` block.

```html
<script>
import { PopperWrapper } from 'floating-vue'

export default {
  ...PopperWrapper,
  name: 'VInfoDropdown',
  vPopperTheme: 'info-dropdown',
}
</script>

<style>
.v-popper--theme-info-dropdown .v-popper__inner {
  background: #004499;
}

.v-popper--theme-info-dropdown .v-popper__arrow-inner {
  border-color: #004499;
}
</style>

```

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

### Enable Eager Mount with `eagerMount`

Source: https://floating-vue.starpad.dev/api

Mount the popper content without waiting for it to be displayed by using the `eager-mount` prop.

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

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

### v-tooltip with Async Content

Source: https://floating-vue.starpad.dev/guide/directive

Provide an async function to the `content` option to load tooltip content asynchronously. Use `loadingContent` to display a placeholder while loading.

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

```

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

```

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

```

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

### show

Source: https://floating-vue.starpad.dev/api

Event emitted when the popper is about to be shown.

```APIDOC
## `show` 
When the popper is going to be shown.
```

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

### Use directives and components directly

Source: https://floating-vue.starpad.dev/guide/installation

Import and register directives (like v-tooltip) and components (like Dropdown) individually if you prefer not to use the global plugin.

```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)
```

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

### Enable Automatic Resize Handling with `handleResize`

Source: https://floating-vue.starpad.dev/api

Automatically update the popper's position when its size changes by enabling the `handle-resize` prop.

```html
<VDropdown handle-resize />
```

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

### v-tooltip with Placement Modifier

Source: https://floating-vue.starpad.dev/guide/directive

Specify the tooltip's placement using modifiers like `.bottom-start`. Refer to the documentation for a full list of available placement options.

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

```

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

### apply-show

Source: https://floating-vue.starpad.dev/api

Event emitted after the show delay has passed.

```APIDOC
## `apply-show` 
Emitted after the show delay.
```

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

### `eagerMount` Prop

Source: https://floating-vue.starpad.dev/api

Mounts the popper content immediately without waiting for the popper to be displayed.

```APIDOC
## `eagerMount`

### Description
Boolean: mount the popper content without waiting for the popper to be displayed.

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

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

### Control Popper Visibility with `shown`

Source: https://floating-vue.starpad.dev/api

Use the `shown` prop to control the visibility of the popper. It's recommended to use this with manual mode (no trigger events).

```html
<VDropdown :shown="isMenuShown" :triggers="[]" />
```

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

### v-tooltip with string content

Source: https://floating-vue.starpad.dev/api

Applies a tooltip with simple string content directly to a button. This is a shorthand when only content is needed.

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

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

### v-tooltip directive options

Source: https://floating-vue.starpad.dev/api

Configuration options for the `v-tooltip` directive, including content, HTML support, and loading states.

```APIDOC
## Directive options 

### `content` 

HTML text to be displayed in the tooltip. Can also be a function that returns the content or a Promise.

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

If you don't need any other option you can directly put the content in the directive:

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

Example with a function that returns a Promise:

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

WARNING
Put the function, not a function call! That way the function is only called when the tooltip is shown.
Don't:
`{ content: fetchTooltip() }`
Do:
`{ content: fetchTooltip }`

### `html` 

Boolean: allow HTML tooltip content.

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

### `loadingContent` 

Same as `content`, used when the actual tooltip content is loading.

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

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

### Define a Custom Theme with Default Options

Source: https://floating-vue.starpad.dev/guide/themes

Register a new theme with custom default values for props like `distance` and `delay`. This theme can then be applied to any popper.

```js
Vue.use(FloatingVue, {
  themes: {
    'info-tooltip': {
      distance: 24,
      delay: { show: 1000, hide: 0 },
    },
  },
})

```

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

### v-tooltip with Promise content

Source: https://floating-vue.starpad.dev/api

Configures a tooltip to fetch its content asynchronously using a Promise. Ensure you pass the function itself, not the result of calling the function, to `content`.

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

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

### createTooltip

Source: https://floating-vue.starpad.dev/api

Creates a tooltip on a specified HTML element. It accepts the element, tooltip content or options, and directive modifiers.

```APIDOC
## `createTooltip`

### Description
`createTooltip(el, valueOrOptions, directiveModifiers)` creates a tooltip on a given element.

### Method
```javascript
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)
}
```
```

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

### resize

Source: https://floating-vue.starpad.dev/api

Event emitted when the content size changes. Requires the `handleResize` prop to be set to `true`.

```APIDOC
## `resize` 
Emitted when the content size changes. You must set the `handleResize` prop to `true`.
```

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

### Include default CSS via CDN

Source: https://floating-vue.starpad.dev/guide/installation

Link the default CSS file from the CDN for browser-based styling.

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

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

### Use a Custom Themed Component

Source: https://floating-vue.starpad.dev/guide/themes

Integrate your custom themed component, such as `VInfoDropdown`, into your application. Define the button content and the popper content using slots.

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

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

```

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

### `instantMove` Prop

Source: https://floating-vue.starpad.dev/api

Skips delays and CSS transitions when another popper is open, making the current popper appear to move instantly.

```APIDOC
## `instantMove`

### Description
Boolean: skip delay & CSS transitions when another popper is open, so that the popper appear to instanly move to the new position.

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

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

### v-tooltip with object content

Source: https://floating-vue.starpad.dev/api

Applies a tooltip with specified options, including content, to a button. The content can be a string, a function, or a Promise.

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

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

### Enable Auto Boundary Max Size with `autoBoundaryMaxSize`

Source: https://floating-vue.starpad.dev/api

Allow Floating Vue to resize the popper's inner container to fit the available space within the boundary using `auto-boundary-max-size`. This is useful for dropdowns that need to shrink.

```html
<VDropdown auto-boundary-max-size />
```

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

### v-tooltip with loading content

Source: https://floating-vue.starpad.dev/api

Specifies a fallback message to display while the actual tooltip content is being loaded asynchronously. This improves user experience during content fetching.

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

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

### `shown` Prop

Source: https://floating-vue.starpad.dev/api

Controls the visibility of the popper. It's recommended to use this with no trigger events for manual control.

```APIDOC
## `shown`

### Description
Boolean that shows or hide the popper. You should probably use no trigger events (manual mode).

### Example
```html
<VDropdown :shown="isMenuShown" :triggers="[]" />
```
```

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

### Theme Inheritance with CSS Classes

Source: https://floating-vue.starpad.dev/guide/css

Demonstrates how CSS classes are inherited when one theme extends another. The parent theme's CSS class is automatically included.

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

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

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

### Tooltip Loading State

Source: https://floating-vue.starpad.dev/guide/css

When a tooltip's content is loading (e.g., from a promise), the popper element receives the `v-popper--tooltip-loading` class. This can be used for visual feedback.

```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>
```

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

### Multi-level Theme Inheritance

Source: https://floating-vue.starpad.dev/guide/css

Illustrates CSS class inheritance across multiple levels of theme extension. All parent theme classes are included.

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

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

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

### v-tooltip with Object Notation

Source: https://floating-vue.starpad.dev/guide/directive

Use an object for the `v-tooltip` directive to configure content and other component props. This allows for more advanced customization.

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

```

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

### VDropdown with delay

Source: https://floating-vue.starpad.dev/api

Configures the delay in milliseconds for showing and hiding the popper. This can be a single value for both or an object specifying separate delays for show and hide.

```html
<VDropdown :delay="200" />
```

```html
<VDropdown :delay="{ show: 500, hide: 100 }" />
```

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

### Add default Floating Vue styles

Source: https://floating-vue.starpad.dev/guide

Import the default CSS file to apply basic styling for Floating Vue components and directives.

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

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

### Use directives and components directly in browser

Source: https://floating-vue.starpad.dev/guide/installation

Access and register directives and components from the global `FloatingVue` object when using the CDN.

```javascript
// Directives
app.directive('tooltip', FloatingVue.vTooltip)
app.directive('close-popper', FloatingVue.vClosePopper)
// Components
app.component('VDropdown', FloatingVue.Dropdown)
app.component('VTooltip', FloatingVue.Tooltip)
app.component('VMenu', FloatingVue.Menu)
```

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

### Change configuration options

Source: https://floating-vue.starpad.dev/guide/installation

Modify global configuration options for Floating Vue, such as defining custom themes.

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

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

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

### Set Popper Size with `autoSize`

Source: https://floating-vue.starpad.dev/api

Control the size of the popper's inner container based on the reference element's size using `auto-size`. Options include `true` (same size), `'min'`, and `'max'`.

```html
<VDropdown auto-size />
<VDropdown auto-size="min" />
<VDropdown auto-size="max" />
```

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

### v-tooltip Loading Class Change

Source: https://floating-vue.starpad.dev/migration/migration-from-v2

The CSS class for the loading state on the popper element has changed from `tooltip-loading` to `v-popper--tooltip-loading`.

```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>
```

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

### Basic v-tooltip Directive

Source: https://floating-vue.starpad.dev/guide/directive

Use the `v-tooltip` directive to add a tooltip to an element. The tooltip content can be a static string or a reactive property.

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

```

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

```

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

### Component Migration: v-popper to VDropdown

Source: https://floating-vue.starpad.dev/migration/migration-from-v2

Replaces the deprecated `<v-popper>` component with the recommended `<VDropdown>` component.

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

```html
<VDropdown/>
```

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

### VDropdown with Function-Based Triggers

Source: https://floating-vue.starpad.dev/guide/component

Utilize functions for 'showTriggers' and 'hideTriggers' to dynamically extend the default trigger lists.

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

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

### Define Popper Content with `popper` Slot

Source: https://floating-vue.starpad.dev/api

Use the `#popper` slot to define the content that appears inside the popper. The slot exposes `shown` (boolean) and `hide` (method) props.

```html
<VDropdown>
  <button>Click me</button>

  <template #popper="{ hide }">
    Menu content here!
    <button @click="hide()">Close</button>
  </template>
</VDropdown>
```

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

### apply-hide

Source: https://floating-vue.starpad.dev/api

Event emitted after the hide delay has passed.

```APIDOC
## `apply-hide` 
Emitted after the hide delay.
```

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

### Customize CSS for a Custom Theme

Source: https://floating-vue.starpad.dev/guide/themes

Style your custom theme by targeting the generated CSS class, typically in the format `.v-popper--theme-[your-theme-name]`. This allows for specific visual adjustments.

```css
.v-popper--theme-info-tooltip {
  .v-popper__inner {
    background: #004499;
  }

  .v-popper__arrow-inner {
    border-color: #004499;
  }
}

```

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

### Apply Custom Theme to Directive

Source: https://floating-vue.starpad.dev/guide/themes

Use the newly created custom theme by specifying its name in the `theme` prop of the `v-tooltip` directive. Ensure the `content` prop is also set.

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

```

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

### v-tooltip with HTML Content

Source: https://floating-vue.starpad.dev/guide/directive

Enable HTML content in tooltips by setting the `html` option to `true`. This is useful for rich text but should be used cautiously to prevent XSS attacks.

```html
<button v-tooltip="{ content: '<b>Bold</b>', html: true }">

```

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

### Use VDropdown or VMenu component

Source: https://floating-vue.starpad.dev/guide

Utilize the `VDropdown` or `VMenu` components for creating interactive dropdowns or menus. The target element is the first child, and the content is provided via 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>
```

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

### Basic VDropdown Component

Source: https://floating-vue.starpad.dev/guide/component

Use the VDropdown component for basic popovers. The popper content must be passed to the #popper slot. It uses the 'dropdown' theme by default.

```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>
```

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

### VTooltip Component for Advanced Tooltips

Source: https://floating-vue.starpad.dev/guide/component

Use the VTooltip component for tooltips with rich content. It utilizes the 'tooltip' theme, similar to the v-tooltip directive.

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

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

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

### `handleResize` Prop

Source: https://floating-vue.starpad.dev/api

When enabled, the popper's position is automatically updated if its size changes.

```APIDOC
## `handleResize`

### Description
Boolean: Automatically update the popper position if its size changes.

### Example
```html
<VDropdown handle-resize />
```
```

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

### Change Popper Theme with `theme` Prop

Source: https://floating-vue.starpad.dev/guide/themes

Use the `theme` prop on a directive or component to apply a different theme. This allows for quick style and behavior changes.

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

```

```html
<VDropdown
  theme="menu"
>

```

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

### `container` Prop

Source: https://floating-vue.starpad.dev/api

Defines the CSS selector for the container where the popper will be appended, e.g., 'body'.

```APIDOC
## `container`

### Description
Selector: Container where the popper will be appended (e.g. `'body'`).
```

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

### v-tooltip with HTML content enabled

Source: https://floating-vue.starpad.dev/api

Enables HTML rendering within the tooltip content by setting the `html` prop to `true`. This allows for rich text formatting like italics.

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

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

### Update Theme-Specific Configuration

Source: https://floating-vue.starpad.dev/guide/config

Adjust configuration options for a specific theme, such as 'dropdown', by accessing `FloatingVue.options.themes`.

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

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

### `boundary` Prop

Source: https://floating-vue.starpad.dev/api

Specifies the DOM element that defines the boundaries for the popper's positioning and sizing.

```APIDOC
## `boundary`

### Description
DOM element for the popper position and size boundaries.
```

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

### Zoom Transition for Popper

Source: https://floating-vue.starpad.dev/guide/css

Apply a zoom transition effect to the popper when it is shown. This requires specific CSS targeting the popper's wrapper element during the show transition.

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

```css
.v-popper__popper.v-popper__popper--show-from .v-popper__wrapper {
  transform: scale(.5);
}

.v-popper__popper.v-popper__popper--show-to .v-popper__wrapper {
  transform: none;
  transition: transform .15s;
}
```

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

### `arrowPadding` Prop

Source: https://floating-vue.starpad.dev/api

Specifies padding for the arrow relative to the popper's bounds, useful for preventing overflow with rounded borders.

```APIDOC
## `arrowPadding`

### Description
Padding of the arrow relative to the popper bounds to prevent it from overflowing if you have rounded borders on the popper (pixels).

### Example
```html
<VDropdown :arrow-padding="12" />
```
```

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

### Set Overflow Padding with `overflowPadding`

Source: https://floating-vue.starpad.dev/api

Define virtual padding within the boundary to prevent popper overflow, specified in pixels using the `overflow-padding` prop.

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

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

### v-tooltip with Manual Trigger

Source: https://floating-vue.starpad.dev/guide/directive

Control the tooltip's visibility manually using the `shown` and `triggers` options. Set `triggers` to an empty array to disable default triggers.

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

```

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

### Group Popovers with `showGroup`

Source: https://floating-vue.starpad.dev/api

Manage groups of popovers by setting the `show-group` prop. Popovers with different or unset `showGroup` values will be closed when one is shown.

```html
<VDropdown show-group="my-group-name" />
```

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

### VDropdown with Custom Triggers

Source: https://floating-vue.starpad.dev/guide/component

Customize popper visibility by specifying custom triggers. Use an empty array for manual control and the 'shown' prop.

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

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

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

### `overflowPadding` Prop

Source: https://floating-vue.starpad.dev/api

Sets virtual padding within the boundary to help prevent the popper from overflowing, measured in pixels.

```APIDOC
## `overflowPadding`

### Description
Virtual padding in the `boundary` used to prevent the popper overflow (pixels).

### Example
```html
<VDropdown :overflow-padding="10" />
```
```

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

### Default Floating Vue Configuration Object

Source: https://floating-vue.starpad.dev/guide/config

This object outlines all available global configuration options and their default values, including settings for tooltips, dropdowns, and menus.

```javascript
export const config: FloatingVueConfig = {
  // Disable popper components
  disabled: false,
  // Default position offset along main axis (px)
  distance: 5,
  // Default position offset along cross axis (px)
  skidding: 0,
  // Default container where the tooltip will be appended
  container: 'body',
  // Element used to compute position and size boundaries
  boundary: undefined,
  // Skip delay & CSS transitions when another popper is shown, so that the popper appear to instanly move to the new position.
  instantMove: false,
  // Auto destroy tooltip DOM nodes (ms)
  disposeTimeout: 5000,
  // Triggers on the popper itself
  popperTriggers: [],
  // Positioning strategy
  strategy: 'absolute',
  // Prevent overflow
  preventOverflow: true,
  // Flip to the opposite placement if needed
  flip: true,
  // Shift on the cross axis to prevent the popper from overflowing
  shift: true,
  // Overflow padding (px)
  overflowPadding: 0,
  // Arrow padding (px)
  arrowPadding: 0,
  // Compute arrow overflow (useful to hide it)
  arrowOverflow: true,
  /**
   * By default, compute autohide on 'click'.
   */
  autoHideOnMousedown: false,
  // Themes
  themes: {
    tooltip: {
      // Default tooltip placement relative to target element
      placement: 'top',
      // Default events that trigger the tooltip
      triggers: ['hover', 'focus', 'touch'],
      // Close tooltip on click on tooltip target
      hideTriggers: events => [...events, 'click'],
      // Delay (ms)
      delay: {
        show: 200,
        hide: 0,
      },
      // Update popper on content resize
      handleResize: false,
      // Enable HTML content in directive
      html: false,
      // Displayed when tooltip content is loading
      loadingContent: '...',
    },
    dropdown: {
      // Default dropdown placement relative to target element
      placement: 'bottom',
      // Default events that trigger the dropdown
      triggers: ['click'],
      // Delay (ms)
      delay: 0,
      // Update popper on content resize
      handleResize: true,
      // Hide on click outside
      autoHide: true,
    },
    menu: {
      $extend: 'dropdown',
      triggers: ['hover', 'focus'],
      popperTriggers: ['hover', 'focus'],
      delay: {
        show: 0,
        hide: 400,
      },
    },
  },
}
```

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

### Include via CDN

Source: https://floating-vue.starpad.dev/guide/installation

Include the Floating Vue JavaScript file directly in your HTML for browser usage.

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

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

### Update Offset Prop: Distance and Skidding

Source: https://floating-vue.starpad.dev/migration/migration-from-v3

Replace the 'offset' prop with 'distance' and 'skidding' for more explicit control over positioning.

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

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

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

### Enable Cross-Axis Shifting with `shiftCrossAxis`

Source: https://floating-vue.starpad.dev/api

Prevent the popper from overflowing the boundary by adjusting its position along the cross axis using the `shift-cross-axis` prop.

```html
<VDropdown shift-cross-axis />
```

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

### Extend Theme and Reset CSS

Source: https://floating-vue.starpad.dev/guide/themes

Extend an existing theme but disable the inheritance of default CSS classes by setting `$resetCss` to `true`. This allows for complete CSS customization.

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

```

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

### Close All Poppers with v-close-popper.all

Source: https://floating-vue.starpad.dev/guide/component

Use the `.all` modifier with the `v-close-popper` directive to close all open poppers on the page.

```html
<a v-close-popper.all>Close All</a>
```

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

### Use directives and components directly in Vue 2

Source: https://floating-vue.starpad.dev/guide/installation

Register directives and components globally for Vue 2 if not using the plugin.

```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)
```

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

### VDropdown with Arrow Padding

Source: https://floating-vue.starpad.dev/guide/component

Configure 'arrow-padding' to prevent the tooltip arrow from glitching when positioned near the reference edges. This sets a limit for the arrow's position within the tooltip.

```html
<VDropdown :skidding="-32" />
```

```html
<VDropdown
  :skidding="-32"
  :arrow-padding="8"
/>
```

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

### VDropdown with Separate Show/Hide Triggers

Source: https://floating-vue.starpad.dev/guide/component

Define distinct triggers for showing and hiding the popper using 'showTriggers' and 'hideTriggers' props.

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

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

### Default Popper Structure

Source: https://floating-vue.starpad.dev/guide/css

The default HTML structure for a popper component, including the base `v-popper` class and dynamic classes like `v-popper--shown`.

```html
<div class="v-popper"> &lt;!&#45;&#45; themeClasses, 'v-popper--shown' &45;&#45;&gt;
  &lt;!&#45;&#45; Default slot &45;&#45;
</div>
```

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

### VDropdown with custom show triggers

Source: https://floating-vue.starpad.dev/api

Allows overriding the default events that trigger the showing of the popper. This can be a function that modifies the existing triggers list.

```html
<VDropdown
  :showTriggers="triggers => [...triggers, 'click']"
/>
```

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

### Control Flipping with `flip`

Source: https://floating-vue.starpad.dev/api

Prevent the popper from overflowing the boundary by using an opposite placement if necessary. Set `flip` to `false` to disable this.

```html
<VDropdown :flip="false" />
```

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

### Recompute All Poppers

Source: https://floating-vue.starpad.dev/api

Call this function to force a recomputation of the position for all visible poppers. This is useful if popper positions become incorrect due to dynamic content changes. It's also automatically called on window resize.

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

recomputeAllPoppers()
```

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

### `showGroup` Prop

Source: https://floating-vue.starpad.dev/api

If set, this prop ensures that only poppers with the same `showGroup` value are open simultaneously, closing others.

```APIDOC
## `showGroup`

### Description
If set, will close all the open popovers that have a different or unset `showGroup` value.

### Example
```html
<VDropdown show-group="my-group-name" />
```
```

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

### Enable Auto Max Size for Popper

Source: https://floating-vue.starpad.dev/migration/migration-from-v3

Use the 'auto-max-size' prop to allow Floating Vue to automatically adjust the popper's max width and height to fit available space.

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

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

### Define Trigger Content with Default Slot

Source: https://floating-vue.starpad.dev/api

Use the default slot to provide the content for the trigger part of the popper, typically a button. The slot exposes `shown` (boolean), `show` (method), and `hide` (method) props.

```html
<VDropdown>
  <button>Click me</button>
</VDropdown>
```

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

### `computeTransformOrigin` Prop

Source: https://floating-vue.starpad.dev/api

Enables the computation of the transform origin for the `.v-popper__wrapper` to facilitate zooming effects relative to the reference element.

```APIDOC
## `computeTransformOrigin`

### Description
Computes the transform origin of the `.v-popper__wrapper` to allow zooming effects relative to the reference element.

### Example
```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>
```
```

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

### Update Trigger Prop

Source: https://floating-vue.starpad.dev/migration/migration-from-v2

The `trigger` prop is now `triggers` and expects an array of events. Use an empty array for manual triggers.

```html
<v-popper trigger="click focus"/>
```

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

```html
<v-popper trigger="manual"/>
```

```html
<VDropdown :triggers="[]"/>
```

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

### Enable Auto Min Size for Popper

Source: https://floating-vue.starpad.dev/migration/migration-from-v2

Restrict the popper's minimum size to match the reference element's size. Useful for form inputs like selects.

```html
<VDropdown auto-min-size />
```

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

### Unified Popper Props for Directive and Component

Source: https://floating-vue.starpad.dev/migration/migration-from-v2

Use the same Popper props for both the directive and component. The directive accepts props directly, while the component uses them as props.

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

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

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

### VDropdown with Skidding Offset

Source: https://floating-vue.starpad.dev/guide/component

Use the 'skidding' prop to offset the popper along the reference element's axis. Negative values can be used for relative offsetting.

```html
<VDropdown
  :skidding="32"
>
```

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

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

### Update Global Configuration Option

Source: https://floating-vue.starpad.dev/guide/config

Modify a specific global configuration option directly on the `FloatingVue.options` object.

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

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

### Enable Auto Hide with `autoHide`

Source: https://floating-vue.starpad.dev/api

Automatically hide the popper when a click occurs outside of it by using the `auto-hide` prop.

```html
<VDropdown auto-hide />
```
Tokens:
Raw