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> ) }

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>

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

<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> ) }

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>

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

Result

Loading...

Props

Name	Type	Default
content * Array of Items in the pop-over menu	ReactElement<any, string | JSXElementConstructor<any>>	—
disabled	boolean	false
children Trigger for the Menu (e.g. a <Button/>)	ReactElement<any, string | JSXElementConstructor<any>> & ReactNode	—
open The prop that allows to control PopOver open state outside of the component	boolean	—
setOpen Callback that allows to set PopOver open state e.g. when clicking on trigger element	((open: boolean) => void)	—
onShow	(() => void)	—
onHide	((outerElementClicked?: boolean) => void)	—
placement	"left" | "right" | "auto" | "auto-start" | "auto-end" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"	"bottom-start"
popOverStyle CSS props to style the component	CSSProperties	—
popoverTestId A test id to be added as "data-testid" attribute to PopOver container for testing purposes	string	—
isFullWidthTrigger Allows the trigger to take the available width. Internal use only!	boolean	—
isHoverOpen The prop that allows to open Popover by hovering on the element	boolean	false
setTriggerEvent The callback that allows to set the event name is triggered.	((eventName: string) => void)	—
offset Allows to displace a popover element from its reference element.	number[]	"[0, Number(Spacing5.split('px')[0])]"
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.