Narwhals Playing Mahjong

    @chakra-ui/popover
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.6 • Public • Published

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

    Install

    npm i @chakra-ui/popover

    DownloadsWeekly Downloads

    332,707

    Version

    2.0.6

    License

    MIT

    Unpacked Size

    49.3 kB

    Total Files

    6

    Last publish

    Collaborators

    • timkolberger
    • segunadebayo
    • _codebender828