open-index/open-npm huggingface dataset:
npm package: @itwasworkingyesterday/floating-ui
Description: **Tooltip / Popup component**
Latest version: 1.0.14

## Component
**Tooltip / Popup component**


## Installation
`npm install @itwasworkingyesterday/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',
    settings: {placement: 'top', offset: 20}
} %}
```

### With HTML
```
<div class="floating-ui" data-component="FloatingUI" data-settings='{"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 '@itwasworkingyesterday/floating-ui';

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