Popover is a non-modal dialog that floats around a trigger. It's used to display contextual information to the user, and should be paired with a clickable trigger element.

Popover is built on top of the Popper.js library, and composes the Popper component.

This component extends
Chakra UI Popover

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverHeader,
  PopoverBody,
  PopoverFooter,
  PopoverArrow,
  PopoverCloseButton,
} from '@chakra-ui/react';

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverHeader,
  PopoverBody,
  PopoverFooter,
  PopoverArrow,
  PopoverCloseButton,
} from '@chakra-ui/react';

When using this component, ensure the children passed to PopoverTrigger is focusable. When Popover opens, focus is sent to PopoverContent. When it closes, focus is returned to the trigger.

function WalkthroughPopover() {
  const initialFocusRef = React.useRef()
  return (
    <Popover
      initialFocusRef={initialFocusRef}
      placement="bottom"
      closeOnBlur={false}
    >
      <PopoverTrigger>
        <Button>Trigger</Button>
      </PopoverTrigger>
      <PopoverContent color="white" bg="navy" borderColor="navy">
        <PopoverHeader pt={4} fontWeight="bold" border="0">
          Popover Title
        </PopoverHeader>
        <PopoverArrow />
        <PopoverCloseButton />
        <PopoverBody>
          With easy access to Broadband and DSL the number of people using the Internet has skyrocket in recent years. Email, instant messaging and file sharing with other Internet users has also provided a platform for faster spreading of viruses, Trojans and Spyware. Being on the Internet without proper protection is like walking.
        </PopoverBody>
        <PopoverFooter
          border="0"
          d="flex"
          alignItems="center"
          justifyContent="space-between"
          pb={4}
        >
            <Button colorScheme='hue-chrome' ref={initialFocusRef}>
              Next
            </Button>
        </PopoverFooter>
      </PopoverContent>
    </Popover>
  )
}

function WalkthroughPopover() {
  const initialFocusRef = React.useRef()
  return (
    <Popover
      initialFocusRef={initialFocusRef}
      placement="bottom"
      closeOnBlur={false}
    >
      <PopoverTrigger>
        <Button>Trigger</Button>
      </PopoverTrigger>
      <PopoverContent color="white" bg="navy" borderColor="navy">
        <PopoverHeader pt={4} fontWeight="bold" border="0">
          Popover Title
        </PopoverHeader>
        <PopoverArrow />
        <PopoverCloseButton />
        <PopoverBody>
          With easy access to Broadband and DSL the number of people using the Internet has skyrocket in recent years. Email, instant messaging and file sharing with other Internet users has also provided a platform for faster spreading of viruses, Trojans and Spyware. Being on the Internet without proper protection is like walking.
        </PopoverBody>
        <PopoverFooter
          border="0"
          d="flex"
          alignItems="center"
          justifyContent="space-between"
          pb={4}
        >
            <Button colorScheme='hue-chrome' ref={initialFocusRef}>
              Next
            </Button>
        </PopoverFooter>
      </PopoverContent>
    </Popover>
  )
}

Editable Example