@crave/farmblocks-tooltip
v3.4.16
Published
Tooltip component
Downloads
1,772
Readme
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