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

Popover Placement

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

import { Fragment } from "react";
import {
  Popover,
  PopoverHandler,
  PopoverContent,
  Button,
} from "@material-tailwind/react";
 
export default function Example() {
  return (
    <Fragment>
      <div className="mb-3 flex gap-3">
        <Popover placement="top">
          <PopoverHandler>
            <Button>Top</Button>
          </PopoverHandler>
          <PopoverContent>
            <span>This is a very beautiful popover, show some love.</span>
          </PopoverContent>
        </Popover>
        <Popover placement="top-start">
          <PopoverHandler>
            <Button>Top Start</Button>
          </PopoverHandler>
          <PopoverContent>
            <span>This is a very beautiful popover, show some love.</span>
          </PopoverContent>
        </Popover>
        <Popover placement="top-end">
          <PopoverHandler>
            <Button>Top End</Button>
          </PopoverHandler>
          <PopoverContent>
            <span>This is a very beautiful popover, show some love.</span>
          </PopoverContent>
        </Popover>
      </div>
      <div className="mb-3 flex gap-3">
        <Popover placement="right">
          <PopoverHandler>
            <Button>Right</Button>
          </PopoverHandler>
          <PopoverContent>
            <span>This is a very beautiful popover, show some love.</span>
          </PopoverContent>
        </Popover>
        <Popover placement="right-start">
          <PopoverHandler>
            <Button>Right Start</Button>
          </PopoverHandler>
          <PopoverContent>
            <span>This is a very beautiful popover, show some love.</span>
          </PopoverContent>
        </Popover>
        <Popover placement="right-end">
          <PopoverHandler>
            <Button>Right End</Button>
          </PopoverHandler>
          <PopoverContent>
            <span>This is a very beautiful popover, show some love.</span>
          </PopoverContent>
        </Popover>
      </div>
      <div className="mb-3 flex gap-3">
        <Popover placement="bottom">
          <PopoverHandler>
            <Button>Bottom</Button>
          </PopoverHandler>
          <PopoverContent>
            <span>This is a very beautiful popover, show some love.</span>
          </PopoverContent>
        </Popover>
        <Popover placement="bottom-start">
          <PopoverHandler>
            <Button>Bottom Start</Button>
          </PopoverHandler>
          <PopoverContent>
            <span>This is a very beautiful popover, show some love.</span>
          </PopoverContent>
        </Popover>
        <Popover placement="bottom-end">
          <PopoverHandler>
            <Button>Bottom End</Button>
          </PopoverHandler>
          <PopoverContent>
            <span>This is a very beautiful popover, show some love.</span>
          </PopoverContent>
        </Popover>
      </div>
      <div className="flex gap-3">
        <Popover placement="left">
          <PopoverHandler>
            <Button>Left</Button>
          </PopoverHandler>
          <PopoverContent>
            <span>This is a very beautiful popover, show some love.</span>
          </PopoverContent>
        </Popover>
        <Popover placement="left-start">
          <PopoverHandler>
            <Button>Left Start</Button>
          </PopoverHandler>
          <PopoverContent>
            <span>This is a very beautiful popover, show some love.</span>
          </PopoverContent>
        </Popover>
        <Popover placement="left-end">
          <PopoverHandler>
            <Button>Left End</Button>
          </PopoverHandler>
          <PopoverContent>
            <span>This is a very beautiful popover, show some love.</span>
          </PopoverContent>
        </Popover>
      </div>
    </Fragment>
  );
}

Custom Popover Animation

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

import {
  Popover,
  PopoverHandler,
  PopoverContent,
  Button,
} from "@material-tailwind/react";
 
export default function Example() {
  return (
    <Popover
      animate={{
        mount: { scale: 1, y: 0 },
        unmount: { scale: 0, y: 25 },
      }}
    >
      <PopoverHandler>
        <Button>Show Popover</Button>
      </PopoverHandler>
      <PopoverContent>
        This is a very beautiful popover, show some love.
      </PopoverContent>
    </Popover>
  );
}

Subscription Popover

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

<Popover placement="bottom">
  <PopoverHandler>
    <Button>Subscribe</Button>
  </PopoverHandler>
  <PopoverContent className="w-96">
    <Typography
      variant="h6"
      color="blue-gray"
      className="mb-6"
    >
      Newsletter Subscription
    </Typography>
    <div className="flex gap-2">
      <Input label="Email Address" />
      <Button variant="gradient">Subscribe</Button>
    </div>
  </PopoverContent>
</Popover>

Contact Popover

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

import React from "react";
import {
  Popover,
  PopoverHandler,
  PopoverContent,
  Avatar,
  Button,
  Typography,
  List,
  ListItem,
  ListItemPrefix
} from "@material-tailwind/react";
import {
  BuildingOffice2Icon,
  PhoneIcon,
  EnvelopeIcon
} from "@heroicons/react/24/solid";
 
export default function Example() {
  return (
    <Popover placement="bottom">
      <PopoverHandler>
        <Button>Contact Us</Button>
      </PopoverHandler>
      <PopoverContent className="w-72">
        <div className="flex items-center gap-4 border-b border-blue-gray-50 pb-4 mb-4">
          <Avatar src="/img/team-4.jpg" alt="candice wu" />
          <div>
            <Typography variant="h6" color="blue-gray">Candice Wu</Typography>
            <Typography variant="small" color="gray" className="font-normal">General Manager</Typography>
          </div>
        </div>
        <List className="p-0">
          <a href="#" className="text-initial">
            <ListItem>
              <ListItemPrefix>
                <SolidIcons.BuildingOffice2Icon className="w-5 h-5" />
              </ListItemPrefix>
              ABC Construction
            </ListItem>
          </a>
          <a href="#" className="text-initial">
            <ListItem>
              <ListItemPrefix>
                <SolidIcons.PhoneIcon className="w-5 h-5" />
              </ListItemPrefix>
              00 123 456 789
            </ListItem>
          </a>
          <a href="#" className="text-initial">
            <ListItem>
              <ListItemPrefix>
                <SolidIcons.EnvelopeIcon className="w-5 h-5" />
              </ListItemPrefix>
              [email protected]
            </ListItem>
          </a>
        </List>
      </PopoverContent>
    </Popover>
  );
}

Popover with Image

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

import {
  Popover,
  PopoverHandler,
  PopoverContent,
  Button,
  Typography,
} from "@material-tailwind/react";
import { ArrowLongRightIcon } from "@heroicons/react/24/outline";
 
export default function Example() {
  return (
    <Popover>
      <PopoverHandler>
        <Button>More Info</Button>
      </PopoverHandler>
      <PopoverContent className="w-[28rem] p-0 overflow-hidden flex z-[999]">
        <div className="p-4">
          <Typography color="blue-gray" className="font-medium mb-2">Material Tailwind</Typography>
          <Typography variant="small" color="gray" className="font-normal mb-4">
            Material Tailwind is an easy to use components library for Tailwind CSS and Material Design. It features multiple React and HTML components, all written with Tailwind CSS classes and Material Design guidelines.
          </Typography>
          <a href="#" className="inline-block">
            <Button size="sm" variant="text" className="flex items-center gap-1 capitalize">
              Read More 
              <ArrowLongRightIcon strokeWidth={2} className="w-3.5 h-3.5" />
            </Button>
          </a>
        </div>
        <img 
          src="https://images.unsplash.com/photo-1544928147-79a2dbc1f389?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dGVhbSUyMGJ1aWxkaW5nfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60"
          alt="image"
          className="w-1/2 h-full object-cover"
        />
      </PopoverContent>
    </Popover>
  )
}

Profile Info Popover

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

import React from "react";
import {
  Popover,
  PopoverHandler,
  PopoverContent,
  Button,
  Avatar,
  Typography,
} from "@material-tailwind/react";
import { MapPinIcon, BuildingOffice2Icon } from "@heroicons/react/24/outline";
 
export default function Example() {
  const [openPopover, setOpenPopover] = React.useState(false);
  const triggers = {
    onMouseEnter: () => setOpenPopover(true),
    onMouseLeave: () => setOpenPopover(false),
  };
 
  return (
    <Popover open={openPopover} handler={setOpenPopover}>
      <PopoverHandler {...triggers}>
        <Button variant="text">Profile Info</Button>
      </PopoverHandler>
      <PopoverContent {...triggers} className="max-w-[24rem]">
        <div className="mb-2 flex items-center justify-between gap-4">
          <Avatar
            size="md"
            variant="circular"
            src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"
            alt="candice wu"
          />
          <Button
            variant="gradient"
            color="blue"
            size="sm"
            className="font-medium capitalize"
          >
            Follow
          </Button>
        </div>
        <Typography
          variant="h6"
          color="blue-gray"
          className="mb-2 flex items-center gap-2 font-medium"
        >
          <span>Candice Wu</span> •{" "}
          <a href="#" className="text-sm text-blue-gray-700">
            @canwu
          </a>
        </Typography>
        <Typography variant="small" color="gray" className="font-normal">
          Frontend Developer • Major interest in Web Development: motivated to
          achieve measurable results, to deepen my knowledge and improve my
          skills.
        </Typography>
        <div className="mt-6 flex items-center gap-8 border-t border-blue-gray-50 pt-4">
          <Typography
            variant="small"
            color="gray"
            className="flex items-center gap-1 text-xs font-normal"
          >
            <MapPinIcon strokeWidth={2} className="-mt-0.5 h-3.5 w-3.5" />
            United Kingdom
          </Typography>
          <Typography
            as="a"
            href="#"
            variant="small"
            color="gray"
            className="flex items-center gap-1 text-xs font-normal"
          >
            <BuildingOffice2Icon
              strokeWidth={2}
              className="-mt-0.5 h-3.5 w-3.5"
            />
            Material Tailwind
          </Typography>
        </div>
      </PopoverContent>
    </Popover>
  );
}

Popover with Description

import React from "react";
import {
  Popover,
  PopoverHandler,
  PopoverContent,
  Button,
  Chip,
  Typography,
} from "@material-tailwind/react";
import { StarIcon, CheckBadgeIcon } from "@heroicons/react/24/solid";
 
export default function Example() {
  const [openPopover, setOpenPopover] = React.useState(false);
  const triggers = {
    onMouseEnter: () => setOpenPopover(true),
    onMouseLeave: () => setOpenPopover(false),
  };
 
  return (
    <Popover open={openPopover} handler={setOpenPopover}>
      <PopoverHandler {...triggers}>
        <Button>Repository Details</Button>
      </PopoverHandler>
      <PopoverContent {...triggers} className="max-w-[26rem]">
        <div className="mb-2 flex items-center gap-3">
          <Typography
            as="a"
            href="#"
            variant="h6"
            color="blue-gray"
            className="font-medium transition-colors hover:text-blue-500"
          >
            @material-tailwind
          </Typography>
          <Chip
            value="Public"
            color="blue"
            className="rounded-full py-1 px-2 font-medium capitalize tracking-wide"
          />
        </div>
        <Typography variant="small" color="gray" className="font-normal">
          @material-tailwind is an easy-to-use components library for Tailwind
          CSS and Material Design.
        </Typography>
        <div className="mt-4 flex items-center gap-5">
          <div className="flex items-center gap-1">
            <span className="h-3 w-3 rounded-full bg-blue-700" />
            <Typography color="gray" className="text-xs font-normal">
              TypeScript
            </Typography>
          </div>
          <div className="flex items-center gap-1">
            <StarIcon className="-mt-0.5 h-4 w-4 text-yellow-700" />
            <Typography color="gray" className="text-xs font-normal">
              1,480
            </Typography>
          </div>
          <div className="flex items-center gap-1">
            <CheckBadgeIcon className="-mt-px h-4 w-4 text-green-500" />
            <Typography color="gray" className="text-xs font-normal">
              Veritied
            </Typography>
          </div>
        </div>
      </PopoverContent>
    </Popover>
  );
}

Props

Learn more about props definition and types of popover components.

Theme

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

navbar

progress bar

Edit this page on Github