Home
Other
Position Floating Elements With Floating UI Library – Floating Vue

Position Floating Elements With Floating UI Library – Floating Vue

Akryum Last Updated: 1 year ago

A Vue.js component that uses Floating UI Library to position floating elements like tooltips, popovers, dropdowns, and much more.

Basic usage:

1. Import and register the Floating Vue.

import FloatingVue from 'floating-vue'
app.use(FloatingVue);
// Stylesheet
import 'floating-vue/dist/style.css'

2. Attach a basic tooltip to the element using the v-tooltip directive.

<button v-tooltip="'This Is A Tooltip'"></button>

3. Or using the VTooltip directive.

<VTooltip>
  <a>Hover Me</a>
  <template #popper>
    Tooltip Content
  </template>
</VTooltip>

4. Enable an element to toggle a dropdown.

<VDropdown
  <button>Click me</button>
  <template #popper>
    <input class="tooltip-content" v-model="msg" placeholder="Dropdowncontent" />
    <p>
      {{ msg }}
    </p>
    <ExampleComponent char="=" />
  </template>
</VDropdown>

5. All default configs.

Vue.use(FloatingVue, {
  // options
})
// 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,
// 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 clock outside
    autoHide: true,
  },
  menu: {
    $extend: 'dropdown',
    triggers: ['hover', 'focus'],
    popperTriggers: ['hover', 'focus'],
    delay: {
      show: 0,
      hide: 400,
    },
  },
},

Preview:

Position Floating Elements With Floating UI Library

Changelog:

v2.0.0beta20 (09/08/2022)

  • noAutoFocus

v2.0.0beta19 (08/02/2022)

  • Popper: add attrs to root div

v2.0.0beta15 (04/11/2022)

  • autoHide function prop

v2.0.0beta14 (04/08/2022)

  • bugfix: tooltip not closing when aiming it

v2.0.0beta13 (04/06/2022)

  • bugfix

v2.0.0beta12 (03/23/2022)

  • add open popper classes on body
  • autofocus popper node

Download Details:

Author: Akryum

Live Demo: https://floating-vue.starpad.dev/guide/#quick-start

Download Link: https://github.com/Akryum/floating-vue/archive/refs/heads/main.zip

Official Website: https://github.com/Akryum/floating-vue

Install & Download:

# NPM
$ npm i floating-vue

Related Posts

Add Comment