PopOver

PopOver is a component which pop over content when clicked on its children and show data inside content prop.

Example

Live Editor

function PopOverFuntion() {
  const [dateRange, setDateRange] = useState({
    startDate: null,
    endDate: null
  });
  return (
  <PopOver
    content={
       <DateRangePicker
        startDate={dateRange.startDate}
        endDate={dateRange.endDate}
        onChange={(startDate, endDate) => {
          setDateRange({ startDate, endDate });
        }}
        currentMonthPosition="right"
      />
    }
  >
    <Button label="Click me!" />
  </PopOver>
  )
}

Result

Loading...

Variants

Callbacks

We also have support for callback on show or hide popover, can be accessed using onShow and onHide props.

Live Editor

<PopOver
  content={"Hello World!"}
  onShow={() => console.log(`Showing`)}
  onHide={() => console.log(`Hiding`)}
>
  <Button label="Click me!" />
</PopOver>

Result

Loading...

Disabled

You can disable the pop over when clicked using the disabled prop.

Live Editor

<PopOver
  content={<p> Hello!!</p>}
  disabled
>
  <Button label="Click me!" />
</PopOver>

Result

Loading...

Open and setOpen

We also have support for controlling the PopOver using the open and setOpen props.

Live Editor

function PopOverFuntion() {
  const [dateRange, setDateRange] = useState({
    startDate: null,
    endDate: null
  });
  const [isOpen, setIsOpen] = useState(false);
  
  return (
    <PopOver
      content={
        <div>
          <DateRangePicker
            startDate={dateRange.startDate}
            endDate={dateRange.endDate}
            onChange={(startDate, endDate) => {
              setDateRange({ startDate, endDate });
            }}
            currentMonthPosition="right"
          />
          <Button
            label="Cancel"
            onClick={() => setIsOpen(false)} 
            css={{
              display: "block"
            }}
          />
        </div>
      }
      open={isOpen}
      setOpen={setIsOpen}
    >
      <Button label="Click me!" onClick={()=>setIsOpen(true)} />
    </PopOver>
  )
}

Result

Loading...

Placement

We also have support for placing the popover, can be accessed using placement prop, default to bottom-start.

Live Editor

<PopOver
  content={<Input placeholder="Input" />}
  placement="top"
>
  <Button label="Click me!" />
</PopOver>

Result

Loading...

Props

Name	Type	Default
content * The content to display inside the popover	ReactElement<unknown, string | JSXElementConstructor<any>>	—
disabled If true, the popover will not open	boolean	false
children The trigger element that opens the popover	ReactElement<unknown, string | JSXElementConstructor<any>>	—
virtualReference Virtual reference for positioning without a DOM trigger element	VirtualReference	—
open Controlled open state	boolean	—
setOpen Callback to update the open state	((open: boolean) => void)	—
onShow Callback executed when the popover opens	(() => void)	—
onHide Callback executed when the popover closes	((outerElementClicked?: boolean) => void)	—
placement Placement of the popover relative to the trigger	"left" | "right" | "top" | "bottom" | "left-start" | "left-end" | "right-start" | "right-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end"	"bottom-start"
popOverStyle Custom styles for the popover container	CSSProperties	—
popoverTestId A test id to be added as "data-testid" attribute to PopOver container for testing purposes	string	—
isFullWidthTrigger If true, the trigger element will take full width	boolean	—
isHoverOpen If true, the popover opens on hover instead of click	boolean	false
setTriggerEvent Callback to track the trigger event type	((eventName: string) => void)	—
offset Offset from the trigger element [crossAxis, mainAxis]	number[]	"[0, DEFAULT_OFFSET_Y]"
fallbackPlacements Alternative placements when preferred placement doesn't fit	Placement[]	—
initialFocus Index of the element to focus when the popover opens (-1 for no focus)	number	—
css Add custom styles to this component. Use with caution. Learn more here: Link	SupportedStyleAttributes	—
inputFieldCss	SupportedStyleAttributes	—
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence	string	—
* - the prop is required.