1. Components
  2. Overlays
  3. Popover

Popover

A popover is an overlay element positioned relative to a trigger.

Aria docsReport an issueEdit this page
import React from "react";
import { InfoIcon } from "lucide-react";
import { Button } from "@/components/dynamic-core/button";
import {
  DialogContent,
  DialogRoot,
  DialogHeading,
} from "@/components/dynamic-core/dialog";
import { Popover } from "@/components/dynamic-core/popover";

export default function Demo() {
  return (
    <DialogRoot>
      <Button shape="square">
        <InfoIcon />
      </Button>
      <Popover>
        <DialogContent className="w-56 space-y-4">
          <DialogHeading>Need help?</DialogHeading>
          <p>
            If you&apos;re having issues accessing your account, contact our
            customer support team for help.
          </p>
        </DialogContent>
      </Popover>
    </DialogRoot>
  );
}

Installation

npx dotui-cli@latest add popover

API Reference

PropTypeDefaultDescription
placement'bottom' | 'bottom left' | 'bottom right' | 'bottom start' | 'bottom end' | 'top' | 'top left' | 'top right' | 'top start' | 'top end' | 'left' | 'left top' | 'left bottom' | 'start' | 'start top' | 'start bottom' | 'right' | 'right top' | 'right bottom' | 'end' | 'end top' | 'end bottom''bottom'The placement of the element with respect to its anchor element.
offsetnumber8The additional offset applied along the main axis between the element and its anchor element.
crossOffsetnumber0The additional offset applied along the cross axis between the element and its anchor element.
containerPaddingnumber12The placement padding that should be applied between the element and its surrounding container.
shouldFlipbooleantrueWhether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.
isOpenboolean-Whether the overlay is open by default (controlled).
defaultOpenboolean-Whether the overlay is open by default (uncontrolled).
isDismissablebooleanfalseWhether to close the modal when the user interacts outside it.
UNSTABLE_portalContainerElementdocument.bodyThe container element in which the overlay portal will be placed. This may have unknown behavior depending on where it is portalled to.
isKeyboardDismissDisabledbooleanfalseWhether pressing the escape key to close the dialog should be disabled.
shouldCloseOnInteractOutside(element: Element) => boolean-When user interacts with the argument element outside of the overlay ref, return true if onClose should be called. This gives you a chance to filter out interaction with elements that should not dismiss the overlay. By default, onClose will always be called on interaction outside the overlay ref.
childrenReactNode | (opts: PopoverRenderProps) => ReactNode-The children of the component. A function may be provided to alter the children based on component state.
classNamestring | (values: PopoverRenderProps & {defaultClassName: string | undefined}) => string-The CSS className for the element. A function may be provided to compute the class based on component state.
styleCSSProperties | (values: PopoverRenderProps & {defaultStyle: CSSProperties}) => CSSProperties | undefined-The inline style for the element. A function may be provided to compute the style based on component state.
EventTypeDescription
onOpenChange(isOpen: boolean) => voidHandler that is called when the overlay's open state changes.
ModalDrawer
dotUI

Bringing singularity to the web.

Community

Built by mehdibha. The source code is available on GitHub.