@crave/farmblocks-tooltip

Tooltip component

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@crave/farmblocks-tooltip
20293.4.167 months ago5 years agoMinified + gzip package size for @crave/farmblocks-tooltip in KB

Readme

Farmblocks Tooltip
A simple tooltip component.
image

Installation

npm install @crave/farmblocks-tooltip

API

A text or children must be supplied, otherwise the tooltip won't be rendered.
| Property | Description | Type | Default | | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- | ---------- | | children | content to be rendered inside the tooltip | React.Node | | text | tooltip text | string | | isVisible | controls its visibility | bool | true | | positionX | controls its position on axis X relatively to the parent | one of "left", "right", "center" or "auto" | "left" | | positionY | controls its position on axis Y relatively to the parent | one of "top", "bottom", or "auto" | "bottom" | | boundariesSelector | (only for align="auto") A CSS selector for a container which will define the limits for the tooltip. If not defined, the limit will be the browser's viewport | string | | zIndex | zIndex value | number | 1000 | | hideArrow | controls arrow visibility | bool | false | | padding | content padding | string | "8px" | | offset | distance from the container to the tooltip | string | "15px" | | overflow | overrides the default overflow property. Note that when overflow=hidden the arrow will be hidden as well | string | | | fullScreenBreakpoint | up to this window width, the tooltip will take the whole screen. Note that you must provide a way to close the tooltip | string | |

License

MIT