Default

import React, { useState } from 'react'
import {
  Body,
  CircleIconButton,
  Flex,
  PbReactPopover,
} from 'playbook-ui'

const PopoverDefault = (props) => {
  const [showPopover, setShowPopover] = useState(false)

  const handleTogglePopover = () => {
    setShowPopover(!showPopover)
  }
  const popoverReference = (
    <CircleIconButton
        icon="info"
        onClick={handleTogglePopover}
        variant="secondary"
    />
  )

  return (
    <Flex
        orientation="row"
        vertical="center"
    >
      <Body text="Click info for more details" />
      &nbsp;
      <PbReactPopover
          offset
          placement="top"
          reference={popoverReference}
          show={showPopover}
      >
        {'I\'m a popover. I can show content of any size.'}
      </PbReactPopover>
    </Flex>
  )
}

export default PopoverDefault

Dropdown example

Notice offset is not set so the popover is flush with the content.

import React, { useState } from 'react'
import {
  Button,
  Icon,
  List,
  ListItem,
  PbReactPopover,
  Flex,
} from 'playbook-ui'

const PopoverWithButton = (props) => {
  const [showPopover, setShowPopover] = useState(false)

  const handleTogglePopover = () => {
    setShowPopover(!showPopover)
  }

  const popoverReference = (
    <Button
        onClick={handleTogglePopover}
        variant="secondary"
    >
      <Flex align="center">
        {"Filter By"}
        <Flex
            className={showPopover ? "fa-flip-vertical" : ""}
            display="inline_flex"
        >
          <Icon
              fixedWidth
              icon="angle-down"
              margin-left="xxs"
          />
        </Flex>
      </Flex>
    </Button>
  )

  return (
    <PbReactPopover
        padding="none"
        placement="bottom"
        reference={popoverReference}
        show={showPopover}
    >
      <List xpadding>
        <ListItem><a>{'Popularity'}</a></ListItem>
        <ListItem><a>{'Title'}</a></ListItem>
        <ListItem><a>{'Duration'}</a></ListItem>
        <ListItem><a>{'Date Started'}</a></ListItem>
        <ListItem><a>{'Date Ended'}</a></ListItem>
      </List>
    </PbReactPopover>
  )
}

export default PopoverWithButton

Close Options

import React, { useState } from 'react'
import {
  Button,
  Flex,
  PbReactPopover,
} from 'playbook-ui'

const PopoverClose = (props) => {
  const [showInsidePopover, setInsideShowPopover] = useState(false)
  const [showOutsidePopover, setOutsideShowPopover] = useState(false)
  const [showAnyPopover, setAnyShowPopover] = useState(false)

  const handleInsideShouldClosePopover = (shouldClosePopover) => {
    setInsideShowPopover(!shouldClosePopover)
  }

  const handleInsideTogglePopover = () => {
    setInsideShowPopover(!showInsidePopover)
  }

  const handleOutsideShouldClosePopover = (shouldClosePopover) => {
    setOutsideShowPopover(!shouldClosePopover)
  }

  const handleOutsideTogglePopover = () => {
    setOutsideShowPopover(!showOutsidePopover)
    setAnyShowPopover(false)
  }

  const handleAnyShouldClosePopover = (shouldClosePopover) => {
    setAnyShowPopover(!shouldClosePopover)
  }

  const handleAnyTogglePopover = () => {
    setAnyShowPopover(!showAnyPopover)
    setOutsideShowPopover(false)
  }

  const insidePopoverTrigger = (
    <Button
        onClick={handleInsideTogglePopover}
        text="Click Inside"
        variant="secondary"
    />
  )

  const outsidePopoverTrigger = (
    <Button
        onClick={handleOutsideTogglePopover}
        text="Click Outside"
        variant="secondary"
    />
  )

  const anyPopoverTrigger = (
    <Button
        onClick={handleAnyTogglePopover}
        text="Click Anywhere"
        variant="secondary"
    />
  )

  return (
    <Flex spacing="between">
      <PbReactPopover
          closeOnClick="inside"
          offset
          placement="bottom"
          reference={insidePopoverTrigger}
          shouldClosePopover={handleInsideShouldClosePopover}
          show={showInsidePopover}
      >
        {'Click on me!'}
      </PbReactPopover>

      <PbReactPopover
          closeOnClick="outside"
          offset
          placement="top"
          reference={outsidePopoverTrigger}
          shouldClosePopover={handleOutsideShouldClosePopover}
          show={showOutsidePopover}
      >
        {'Click anywhere but me!'}
      </PbReactPopover>

      <PbReactPopover
          closeOnClick="any"
          offset
          placement="right"
          reference={anyPopoverTrigger}
          shouldClosePopover={handleAnyShouldClosePopover}
          show={showAnyPopover}
      >
        {'Click anything!'}
      </PbReactPopover>
    </Flex>
  )
}

export default PopoverClose

Set Z-Index

import React, { useState } from 'react'
import {
  Body,
  Button,
  PbReactPopover,
} from 'playbook-ui'

const PopoverZIndex = (props) => {
  const [showPopover, setShowPopover] = useState(false)

  const handleTogglePopover = () => {
    setShowPopover(!showPopover)
  }

  const handleShouldClosePopover = (shouldClosePopover) => {
    setShowPopover(!shouldClosePopover)
  }

  const popoverTrigger = (
    <Button
        onClick={handleTogglePopover}
        text="Click Me"
        variant="secondary"
    />
  )

  return (
    <>
      <div style={{ position: 'relative', zIndex: 2 }}>
        <Body
            marginBottom="md"
            text="I've got a z-index of 2"
        />
      </div>
      <PbReactPopover
          closeOnClick="outside"
          offset
          padding="sm"
          placement="top"
          reference={popoverTrigger}
          shouldClosePopover={handleShouldClosePopover}
          show={showPopover}
          zIndex={3}
      >
        {'I have a custom z-index of 3'}
      </PbReactPopover>
    </>
  )
}

export default PopoverZIndex

Scroll and Height Settings

import React, { useState } from 'react'
import {
  Body,
  Button,
  PbReactPopover,
  Title,
} from 'playbook-ui'

const PopoverScrollHeight = (props) => {
  const [showPopover, setShowPopover] = useState(false)

  const handleTogglePopover = () => {
    setShowPopover(!showPopover)
  }

  const handleShouldClosePopover = (shouldClosePopover) => {
    setShowPopover(!shouldClosePopover)
  }

  const popoverTrigger = (
    <Button
        onClick={handleTogglePopover}
        text="Click Me"
        variant="secondary"
    />
  )

  return (
    <PbReactPopover
        closeOnClick="any"
        maxHeight="150px"
        maxWidth="240px"
        offset
        padding="md"
        paddingBottom="sm"
        paddingTop="sm"
        placement="top"
        reference={popoverTrigger}
        shouldClosePopover={handleShouldClosePopover}
        show={showPopover}
    >
      <Body
          marginBottom="sm"
          text="So many people live within unhappy circumstances and yet will
          not take the initiative to change their situation because they are
          conditioned to a life of security, conformity, and conservation, all of
          which may appear to give one peace of mind, but in reality, nothing is
          more damaging to the adventurous spirit."
      />
      <Title
          size={4}
          text="- Christopher McCandless"
      />

    </PbReactPopover>
  )
}

export default PopoverScrollHeight

With Actionable Content

import React, { useState } from 'react'
import {
  Body,
  Button,
  CircleIconButton,
  Flex,
  PbReactPopover,
} from 'playbook-ui'

const PopoverActionableContent = (props) => {
  const [showPopover, setShowPopover] = useState(false)

  const handleTogglePopover = () => {
    setShowPopover(!showPopover)
  }

  const handleShouldClosePopover = (shouldClose) => {
    setShowPopover(!shouldClose)
  }

  const popoverReference = (
    <CircleIconButton
        icon="info"
        onClick={handleTogglePopover}
        variant="secondary"
    />
  )

  return (
    <Flex
        orientation="row"
        vertical="center"
    >
      <Body text="Click info for more details" />
      &nbsp;
      <PbReactPopover
          closeOnClick="inside"
          offset
          placement="top"
          reference={popoverReference}
          shouldClosePopover={handleShouldClosePopover}
          show={showPopover}
      >
        <Body textAlign="center">
          <Button
              onClick={() => {alert("Let's do this!")}}
              text="Learn More"
          />
        </Body>
      </PbReactPopover>
    </Flex>
  )
}

export default PopoverActionableContent

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat

Popover

Enhancements

Usecase #1 - Close on click into popover content

Usecase #2 - Close only on click outside of popover content

Available Props

Contribute to Playbook

Power

Connect