float-tooltip

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

`
then
`js
const myTooltip = new Tooltip()
.content('

');
`

API reference

$3

`js
new Tooltip(, { configOptions })
`

| Config options | Description | Default |
| --- | --- | :--: |
| style: object | A custom style object apply to the tooltip and override the default style. | - |




$3

| Method | Description | Default |
| --- | --- |---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| content([string | HTMLElement]) | Specify the content of the tooltip. Supports plain text, HTML string content, an HTML element or React JSX. If a falsy value is supplied the tooltip will automatically hide. | false |
| offsetX([number]) | 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. | - |
| offsetY([number]) | 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

 If this project has helped you and you'd like to contribute back, you can always buy me a ☕!

[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