Component Image

Component Description

Tooltip / Popup component

Installation

npm install @huncwotdigital/floating-ui

Configuration

{
    placement?: 'top' | 'bottom' | 'left' | 'right';
    offset?: number;
}

Usage

With Twig Templates

{% include '@floating-ui/index.twig' with {
    type: 'popup',
    anchor: '<button>Click me</button>',
    content: 'Popup content here',
    options: {placement: 'top', offset: 20}
} %}

With HTML

<div class="floating-ui" data-component="FloatingUI" data-options='{"placement": "top", "offset": 20}'>
    <button>Click me</button>
    <div class="floating-ui__content js-content">
        <div class="js-content-inner">
            Popup content
        </div>
        <div class="floating-ui__arrow js-arrow"></div>
    </div>
</div>

Manual JavaScript

import { FloatingUI } from '@huncwotdigital/floating-ui';

const element = document.querySelector('.floating-ui');
const floating = new FloatingUI(element);