float-tooltip

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 ☕!