@clds/popover NPM

@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.