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.

Attribute	Type	Description	Default
`open`	`boolean`	Makes the popover open, when popover is controlled	`undefined`
`handler`	`function`	Change open state for controlled popover	`undefined`
`placement`	Placement	Change popover placement	`top`
`offset`	Offset	Change popover offset from it's handler	`5`
`dismiss`	Dismiss	Change dismiss listeners when clicking outside	`undefined`
`animate`	Animate	Change popover animation	`undefined`
`children`	`node`	Add content for popover	No 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.

Attribute	Type	Description	Default
`children`	`node`	Add content for popover handler	No 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.

Attribute	Type	Description	Default
`className`	`node`	Add custom className for popover content	`''`
`children`	`node`	Add content for popover content	No 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;
};

navbar

progress bar

Edit this page on Github