Tailwind CSS Popover - React

Our popover component for Tailwind CSS & React is a small overlay of content that is used to demonstrate secondary information of any component when a user clicks it.

See below our simple popover example that you can use in your web project.


import { Popover, Button } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <Popover>
      <PopoverHandler>
        <Button variant="gradient">Show Popover</Button>
      </PopoverHandler>
      <PopoverContent>
        This is a very beautiful popover, show some love.
      </PopoverContent>
    </Popover>
  );
}

Popover Props

The following props are available for the 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 its a required prop.

Popover Handler Props

The following props are available for the 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 its a required prop.

Popover Content Props

The following props are available for the 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 its a required prop.

Types

type placement =
  | "top"
  | "top-start"
  | "top-end"
  | "right"
  | "right-start"
  | "right-end"
  | "bottom"
  | "bottom-start"
  | "bottom-end"
  | "left"
  | "left-start"
  | "left-end";
type offset =
  | number
  | {
      mainAxis?: number;
      crossAxis?: number;
      alignmentAxis?: number | null;
    };
type dismiss = {
  enabled?: boolean;
  escapeKey?: boolean;
  referencePointerDown?: boolean;
  outsidePointerDown?: boolean;
  ancestorScroll?: boolean;
  bubbles?: boolean;
};
type animate = {
  mount?: Object;
  unmount?: Object;
};
Edit this page on Github