Popover

Displays rich content in a portal, triggered by a button.

radix-ui.com

Alignment

Default

<Popover>
  <PopoverTrigger asChild={true}>
    <Button>
      Default
    </Button>
  </PopoverTrigger>
  <PopoverContent>
    <h3>
      Content
    </h3>
  </PopoverContent>
</Popover>

Start

<Popover>
  <PopoverTrigger asChild={true}>
    <Button>
      Start
    </Button>
  </PopoverTrigger>
  <PopoverContent align="start" sideOffset={5}>
    <h3>
      Content
    </h3>
  </PopoverContent>
</Popover>

End

<Popover>
  <PopoverTrigger asChild={true}>
    <Button>
      End
    </Button>
  </PopoverTrigger>
  <PopoverContent align="end" sideOffset={5}>
    <h3>
      Content
    </h3>
  </PopoverContent>
</Popover>

Side

Top

<Popover>
  <PopoverTrigger asChild={true}>
    <Button>
      Top
    </Button>
  </PopoverTrigger>
  <PopoverContent side="top" sideOffset={5}>
    <h3>
      Content
    </h3>
  </PopoverContent>
</Popover>

Bottom

<Popover>
  <PopoverTrigger asChild={true}>
    <Button>
      Right
    </Button>
  </PopoverTrigger>
  <PopoverContent side="right" sideOffset={5}>
    <h3>
      Content
    </h3>
  </PopoverContent>
</Popover>

Left

<Popover>
  <PopoverTrigger asChild={true}>
    <Button>
      Left
    </Button>
  </PopoverTrigger>
  <PopoverContent side="left" sideOffset={5}>
    <h3>
      Content
    </h3>
  </PopoverContent>
</Popover>