Tailwind CSS Popover - Props



Popover Props

The following props are available for popover component. These are the custom props that come with we've added for the popover component and you can use all the other native props as well.

AttributeTypeDescriptionDefault
openbooleanMakes the popover open, when popover is controlledundefined
handlerfunctionChange open state for controlled popoverundefined
placementPlacementChange popover placementtop
offsetOffsetChange popover offset from it's handler5
dismissDismissChange dismiss listeners when clicking outsideundefined
animateAnimateChange popover animationundefined
childrennodeAdd content for popoverNo default value it's a required prop.


For TypeScript Only

import type { PopoverProps } from "@material-tailwind/react";

Popover Handler Props

The following props are available for popover handler component. These are the custom props that come with we've added for the popover handler component and you can use all the other native props as well.

AttributeTypeDescriptionDefault
childrennodeAdd content for popover handlerNo default value it's a required prop.


For TypeScript Only

import type { PopoverHandlerProps } from "@material-tailwind/react";

Popover Content Props

The following props are available for popover content component. These are the custom props that come with we've added for the popover content component and you can use all the other native props as well.

AttributeTypeDescriptionDefault
classNamenodeAdd custom className for popover content''
childrennodeAdd content for popover contentNo default value it's a required prop.


For TypeScript Only

import type { PopoverContentProps } from "@material-tailwind/react";

Types - Placement

type placement =
  | "top"
  | "top-start"
  | "top-end"
  | "right"
  | "right-start"
  | "right-end"
  | "bottom"
  | "bottom-start"
  | "bottom-end"
  | "left"
  | "left-start"
  | "left-end";

Types - Offset

type offset =
  | number
  | {
      mainAxis?: number;
      crossAxis?: number;
      alignmentAxis?: number | null;
    };

Types - Dismiss

type dismissType = {
  enabled?: boolean;
  escapeKey?: boolean;
  referencePointerDown?: boolean;
  outsidePointerDown?: boolean;
  ancestorScroll?: boolean;
  bubbles?: boolean;
};

Types - Animate

type animate = {
  mount?: object;
  unmount?: object;
};

Related

Examples

Checkout different examples for popover components.

Theme

Learn how to customize the theme and styles for popover components.

Edit this page on Github