2.2.1 • Published 2 years ago

@chakra-ui/popover v2.2.1

Weekly downloads
61,348
License
MIT
Repository
github
Last release
2 years ago

@chakra-ui/popover

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

Installation

yarn add @chakra-ui/popover

# or

npm i @chakra-ui/popover

Import components

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

Basic Usage

When using this component, ensure the children passed to PopoverTrigger is focusable, user can tab to it using their keyboard, and it can take a ref. It is critical for accessibility.

A11y: When the Popover opens, focus is sent to the PopoverContent. When it closes, focus is returned to the trigger.

<Popover>
  <PopoverTrigger>
    <Button>Trigger</Button>
  </PopoverTrigger>
  <PopoverContent>
    <PopoverArrow />
    <PopoverCloseButton />
    <PopoverHeader>Confirmation!</PopoverHeader>
    <PopoverBody>Are you sure you want to have that milkshake?</PopoverBody>
  </PopoverContent>
</Popover>

Rendering the Popover in a Portal

By default, the Popover doesn't render in a Portal. To make them display in a portal, pass the usePortal prop.

You might need to Inspect Element to see this in action. Notice the PopoverContent is rendered as a child of <body>

<Popover usePortal>
  <PopoverTrigger>
    <Button>Trigger</Button>
  </PopoverTrigger>
  <PopoverContent>
    <PopoverArrow />
    <PopoverHeader>Header</PopoverHeader>
    <PopoverCloseButton />
    <PopoverBody>
      <Button colorScheme="blue">Button</Button>
    </PopoverBody>
    <PopoverFooter>This is the footer</PopoverFooter>
  </PopoverContent>
</Popover>
2.2.1

2 years ago

2.2.0

2 years ago

2.1.12

2 years ago

2.1.11

2 years ago

2.1.10

2 years ago

2.1.9

2 years ago

2.1.6

2 years ago

2.1.8

2 years ago

2.1.7

2 years ago

2.1.2

3 years ago

2.1.4

3 years ago

2.1.3

3 years ago

2.1.5

3 years ago

2.1.1

3 years ago

2.1.0

3 years ago

2.0.9

3 years ago

2.0.3

3 years ago

2.0.2

3 years ago

2.0.5

3 years ago

2.0.4

3 years ago

2.0.7

3 years ago

2.0.6

3 years ago

2.0.8

3 years ago

2.0.1

3 years ago

2.0.0-next.4

3 years ago

2.0.0-next.2

3 years ago

2.0.0-next.3

3 years ago

2.0.0

3 years ago

1.11.8

3 years ago

1.11.9

3 years ago

2.0.0-next.0

3 years ago

2.0.0-next.1

3 years ago

1.11.7

3 years ago

1.11.4

3 years ago

1.11.3

3 years ago

1.11.2

3 years ago

1.11.1

3 years ago

1.11.6

3 years ago

1.11.5

3 years ago

1.11.0

4 years ago

1.10.1

4 years ago

1.10.0

4 years ago

1.9.1

4 years ago

1.8.5

4 years ago

1.8.4

4 years ago

1.8.3

4 years ago

1.8.2

4 years ago

1.8.2-next.0

4 years ago

1.8.1

4 years ago

1.8.0

4 years ago

1.7.1

4 years ago

1.7.0

4 years ago

1.6.1

4 years ago

1.6.0

4 years ago

1.5.1

4 years ago

1.5.0

4 years ago

1.4.0

4 years ago

1.3.0

4 years ago

1.2.3

4 years ago

1.2.2

4 years ago

1.2.1

4 years ago

1.2.0

4 years ago

1.1.0

4 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago

1.0.0-rc.8

5 years ago

1.0.0-rc.7

5 years ago

1.0.0-rc.6

5 years ago

1.0.0-rc.5

5 years ago

1.0.0-rc.4

5 years ago

1.0.0-rc.3

5 years ago

1.0.0-rc.2

5 years ago

1.0.0-rc.1

5 years ago

1.0.0-next.7

5 years ago

1.0.0-rc.0

5 years ago

1.0.0-next.5

5 years ago

1.0.0-next.6

5 years ago

1.0.0-next.4

5 years ago

1.0.0-next.3

5 years ago

1.0.0-next.2

5 years ago

1.0.0-next.1

5 years ago

1.0.0-next.0

5 years ago