Farmblocks Tooltip
A simple tooltip component.
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