npm install @clds/popover---
Documentation of the Cloudinary Popover component.
The purpose of this component is to display a popover based on rc-tooltip component (reference).
Install the package using Yarn:
``sh`
yarn add @cld/popover
`javascript
import React from 'react';
import Button from '@cld/button';
import Popover from '@cld/popover';
const PopoverDemo = () => {
const [visible, setVisible] = useState(false);
return (
visible={visible}
onVisibleChange={setVisible}
trigger="click"
placement="bottomRight"
>
);
};
``
Most props come from rc-tooltip component.
| Name | Req | Type | Default | |
| -------------------- | ------------------------------------------------------------------------- | ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
| overlayClassName | string | | additional className added to popup overlay |
| trigger | string | string[] | ['hover'] | which actions cause tooltip shown. enum of 'hover','click','focus' |
| mouseEnterDelay | number | 0 | delay time to show when mouse enter.unit: s. |
| mouseLeaveDelay | number | 0.1 | delay time to hide when mouse leave.unit: s. |
| overlayStyle | Object | | additional style of overlay node |
| prefixCls | String | rc-tooltip | prefix class name |
| transitionName | String | Object | | same as https://github.com/react-component/animate |
| onVisibleChange | Function | | call when visible is changed |
| afterVisibleChange | Function | | call after visible is changed |
| visible | boolean | | whether tooltip is visible |
| defaultVisible | boolean | | whether tooltip is visible initially |
| placement | String | | one of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'] |
| align | Object: alignConfig of dom-align | | value will be merged into placement's config |
| onPopupAlign | function(popupDomNode, align) | | callback when popup node is aligned |
| overlay | React.Element | () => React.Element | | popup content |
| arrowContent | React.Node | null | arrow content |
| getTooltipContainer | function | | Function returning html node which will act as tooltip container. By default the tooltip attaches to the body. If you want to change the container, simply return a new element. |
| destroyTooltipOnHide | boolean | FALSE | whether destroy tooltip when tooltip is hidden |
| id | String | | Id which gets attached to the tooltip content. Can be used with aria-describedby to achieve Screenreader-Support. |
| paperProps | object | {rounded: boolean, padded: boolean} | Configuration of paper component which wraps popover content. |
This library follows Semantic Versioning.
See LICENSE