1.7.4 • Published 4 months ago
float-tooltip v1.7.4
Floating Tooltip
A floating tooltip JS component.
Quick start
import Tooltip from 'float-tooltip';
or using a script tag
<script src="//unpkg.com/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. | 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 ☕!