@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