open-index/open-npm huggingface dataset:
npm package: @huncwotdigital/floating-ui
Description: <img width="632" height="218" alt="image" src="https://github.com/user-attachments/assets/a8c4da4b-7ff6-46bf-8130-46773483ef09" />
Latest version: 1.0.4

## Component Image
<img width="632" height="218" alt="image" src="https://github.com/user-attachments/assets/a8c4da4b-7ff6-46bf-8130-46773483ef09" />

## 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);
```
npm package: @hund.studio/mdgen
Description: [![npm version](https://img.shields.io/npm/v/@hund.studio/mdgen?color=red&label=npm%20package)](https://www.npmjs.com/package/@hund.studio/mdgen) [![npm beta version](https://img.shields.io/npm/v/@hund.studio/mdgen/beta?label=beta)](https://www.npmjs.com/
Latest version: 0.0.0