# float-tooltip

> Floating tooltip component

Latest version **1.7.5** (published 2025-03-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install float-tooltip
pnpm add float-tooltip
yarn add float-tooltip
bun add float-tooltip
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.7.5 |
| Published | 2025-03-21 |
| First published | 2022-06-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=12 |
| Dependencies | 3 |
| Unpacked size | 262.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Vasco Asturiano |
| Maintainers | vasturiano |
| Keywords | tooltip, floating |

## Links

- npm: https://www.npmjs.com/package/float-tooltip
- Repository: https://github.com/vasturiano/float-tooltip
- Issues: https://github.com/vasturiano/float-tooltip/issues
- npm.io page: https://npm.io/package/float-tooltip

## Dependencies (3)

- [preact](https://npm.io/package/preact.md) 10
- [kapsule](https://npm.io/package/kapsule.md) ^1.16
- [d3-selection](https://npm.io/package/d3-selection.md) 2 - 3

## Recent versions

- 1.7.5 (latest) — 2025-03-21
- 1.7.4 — 2025-02-25
- 1.7.3 — 2025-01-17
- 1.7.2 — 2025-01-17
- 1.7.1 — 2025-01-17
- 1.7.0 — 2025-01-16
- 1.6.1 — 2025-01-16
- 1.6.0 — 2025-01-15
- 1.5.0 — 2025-01-14
- 1.4.2 — 2025-01-13
- 1.4.1 — 2025-01-13
- 1.4.0 — 2025-01-13
- 1.3.1 — 2024-12-06
- 1.3.0 — 2024-12-06
- 1.2.1 — 2023-02-08
- … 3 more at https://npm.io/package/float-tooltip/versions

## README

Floating Tooltip
==============

[![NPM package][npm-img]][npm-url]
[![Build Size][build-size-img]][build-size-url]
[![NPM Downloads][npm-downloads-img]][npm-downloads-url]

A floating tooltip JS component.

## Quick start

```js
import Tooltip from 'float-tooltip';
```
or using a *script* tag
```html
<script src="//cdn.jsdelivr.net/npm/float-tooltip"></script>
```
then
```js
const myTooltip = new Tooltip(<triggerDOMElement>)
  .content('<div>Hello World!</div>');
```

## API reference

### Initialisation

```js
new Tooltip(<containerDomElement>, { configOptions })
```

| Config options | Description | Default |
| --- | --- | :--: |
| <b>style</b>: <i>object</i> | A custom style object apply to the tooltip and override the default style. | - |


### Methods

| Method | Description | Default                                                                                                                                                                                                                                           |
| --- | --- |---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| <b>content</b>([<i>string | HTMLElement</i>]) | Specify the content of the tooltip. Supports plain text, HTML string content, an [HTML element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) or [React JSX](https://react.dev/learn/writing-markup-with-jsx). If a falsy value is supplied the tooltip will automatically hide. | `false` |
| <b>offsetX</b>([<i>number</i>]) | The amount of pixels to offset the tooltip horizontally from its center position relative to the pointer. If a `null` value is specified (default) the offset will be automatically calculated and gradually shifted so it remains horizontally inside the parent element. | - |
| <b>offsetY</b>([<i>number</i>]) | The amount of pixels to offset the tooltip vertically relative to the pointer. A negative value will shift the tooltip to be above the pointer. If a `null` value is specified (default) the tooltip will be flipped above when the pointer is near the bottom, so it remains vertically inside the parent element. | - |

## Giving Back

[![paypal](https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=L398E7PKP47E8&currency_code=USD&source=url) If this project has helped you and you'd like to contribute back, you can always [buy me a ☕](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=L398E7PKP47E8&currency_code=USD&source=url)!

[npm-img]: https://img.shields.io/npm/v/float-tooltip
[npm-url]: https://npmjs.org/package/float-tooltip
[build-size-img]: https://img.shields.io/bundlephobia/minzip/float-tooltip
[build-size-url]: https://bundlephobia.com/result?p=float-tooltip
[npm-downloads-img]: https://img.shields.io/npm/dt/float-tooltip
[npm-downloads-url]: https://www.npmtrends.com/float-tooltip

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