Package Exports
- float-tooltip
Readme
Floating Tooltip
A floating tooltip JS component.
Quick start
import Tooltip from 'float-tooltip';or using a script tag
<script src="//cdn.jsdelivr.net/npm/float-tooltip"></script>then
const myTooltip = new Tooltip(<triggerDOMElement>)
.content('<div>Hello World!</div>');API reference
Initialisation
new Tooltip(<containerDomElement>, { configOptions })| Config options | Description | Default |
|---|---|---|
| style: object | A custom style object apply to the tooltip and override the default style. | - |
Methods
| 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. |
| 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 ☕!