@clds/popover
v0.50.0
Published
---
Downloads
1,089
Readme
@clds/popover
Documentation of the Cloudinary Popover component.
The purpose of this component is to display a popover based on rc-tooltip
component (reference).
Installation
Install the package using Yarn:
yarn add @cld/popover
Usage
import React from 'react';
import Button from '@cld/button';
import Popover from '@cld/popover';
const PopoverDemo = () => {
const [visible, setVisible] = useState(false);
return (
<Popover
overlay={<>Hello there!</>}
visible={visible}
onVisibleChange={setVisible}
trigger="click"
placement="bottomRight"
>
<Button>Open Popover</Button>
</Popover>
);
};
Props
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. |
Versioning
This library follows Semantic Versioning.
License
See LICENSE