AstroLaunch UI Popover - React

Our Popover component for AstroLaunch UI & 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.


Popover Placement

You can change the position of the Popover component using the placement prop.

Popover Custom Animation

You can modify the open/close state animation for Popover component using the animate prop.

Subscription Popover

Use this beautiful popover if you want to let the users subscribe easily.

Contact Popover

Use this example of a popover component to help users get the help they need easier.

Popover with Image

This example is used to show more information. It contains an image, headline, description, and link.

Profile Info Popover

Use this example to help the user find out more information about a profile.

Popover with Description

Popover Props

The following props are available for popover component. These are the custom props that 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 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 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;
  referencePress?: boolean;
  referencePressEvent?: 'pointerdown' | 'mousedown' | 'click';
  outsidePress?: boolean | ((event: MouseEvent) => boolean);
  outsidePressEvent?: 'pointerdown' | 'mousedown' | 'click';
  ancestorScroll?: boolean;
  bubbles?: boolean | {
      escapeKey?: boolean;
      outsidePress?: boolean;
  };
};

Types - Animate

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

Popover Theme

Learn how to customize the theme and styles for popover components, the theme object for popover components has two main objects:

A. The defaultProps object for setting up the default value for props of popover component.
B. The styles object for customizing the theme and styles of popover component.

You can customize the theme and styles of popover components by adding Tailwind CSS classes as key paired values for objects.



Popover Theme Object Type

interface PopoverStylesType {
  defaultProps: {
    placement: string;
    offset:
      | number
      | {
          mainAxis: number;
          crossAxis: number;
          alignmentAxis: number;
        };
    dismiss: {
      enabled: boolean;
      escapeKey: boolean;
      referencePress: boolean;
      referencePressEvent: 'pointerdown' | 'mousedown' | 'click';
      outsidePress: boolean | ((event: MouseEvent) => boolean);
      outsidePressEvent: 'pointerdown' | 'mousedown' | 'click';
      ancestorScroll: boolean;
      bubbles: boolean | {
          escapeKey: boolean;
          outsidePress: boolean;
      };
    };
    animate: {
      mount: object;
      unmount: object;
    };
    className: string;
  };
  styles: {
    base: object;
  };
}


For TypeScript Only

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

Popover Theme Customization

const theme = {
  popover: {
    defaultProps: {
      placement: "top",
      offset: 5,
      dismiss: {},
      animate: {
        unmount: {},
        mount: {},
      },
      className: "",
    },
    styles: {
      base: {
        bg: "bg-white",
        p: "p-4",
        border: "border border-blue-gray-50",
        borderRadius: "rounded-lg",
        boxShadow: "shadow-lg shadow-blue-gray-500/10",
        fontFamily: "font-sans",
        fontSize: "text-sm",
        fontWeight: "font-normal",
        color: "text-blue-gray-500",
        outline: "focus:outline-none",
        overflowWrap: "break-words",
        whiteSpace: "whitespace-normal",
      },
    },
  },
};


If you want to see more examples and properties please check the official Material Tailwind Documentation.