# @fluffio/core

> A lightweight popover/tooltip library with the use of Popover API

Latest version **1.0.0** (published 2023-12-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install @fluffio/core
pnpm add @fluffio/core
yarn add @fluffio/core
bun add @fluffio/core
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2023-12-11 |
| First published | 2023-12-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 14.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | geophyzik |
| Maintainers | r-oscar, geophyzik |
| Keywords | popover, tooltip, dropdown, menu, anchoring |

## Links

- npm: https://www.npmjs.com/package/@fluffio/core
- Repository: https://github.com/geophyzik/fluffio
- Homepage: https://github.com/geophyzik/fluffio#readme
- Issues: https://github.com/geophyzik/fluffio/issues
- npm.io page: https://npm.io/package/@fluffio/core

## Recent versions

- 1.0.0 (latest) — 2023-12-11
- 0.1.4 — 2023-12-09
- 0.1.3 — 2023-12-05
- 0.1.2 — 2023-12-05
- 0.1.1 — 2023-12-05
- 0.1.0 — 2023-12-05

## README

## Fluffio

Meet Fluffio: a lightweight tooltip/popover library that utilizes the brand-new Popover API.

> fluffio is currently under development. Please be aware that it has limited number of features and doesn't (yet) work in browsers that don't support Popover API

Fluffio requires two things: an anchor (reference) node, and a popover (tooltip) node


## How To Install?

```shell
npm i @fluffio/core
```

## Usage

Basic usage (show tooltip on hover, positioned at the bottom):

```js
import { fluffio } from '@fluffio/core';

const tooltip = document.querySelector('.tooltip');
const button = document.querySelector('button');

fluffio(tooltip, button);
```

Different placement:
```js
fluffio(tooltip, button, { direction: 'top', side: 'left' })
```

With flipping:
```js
fluffio(tooltip, button, { flip: true })
```

If you need to re-adjust position further on, you can apply computePosition function:

```js
import { fluffio, computePosition } from '@fluffio/core';

const tooltip = document.querySelector('.tooltip');
const button = document.querySelector('button');

fluffio(tooltip, button);

button.addEventListener('click', () => {
  // set direction to top if clicked
  computePosition(tooltip, button, { direction: 'top' });
});
```

## License

MIT

---
_Source: https://npm.io/package/@fluffio/core · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._