React Popovers

Material Tailwind popovers are a small overlay of content that is used to demonstrate secondary information of any component when it is clicked by a user.


Popover Left

import React, { useRef } from "react";
import Button from "@material-tailwind/react/Button";
import Popover from "@material-tailwind/react/Popover";
import PopoverContainer from "@material-tailwind/react/PopoverContainer";
import PopoverHeader from "@material-tailwind/react/PopoverHeader";
import PopoverBody from "@material-tailwind/react/PopoverBody";

export default function Popover() {
    const buttonRef = useRef();

    return (
        <>
            <Button color="lightBlue" ref={buttonRef} ripple="light">
                Popover left
            </Button>

            <Popover placement="left" ref={buttonRef}>
                <PopoverContainer>
                    <PopoverHeader>Popover left</PopoverHeader>
                    <PopoverBody>
                        And here's some amazing content. It's very engaging. Right?
                    </PopoverBody>
                </PopoverContainer>
            </Popover>
        </>
    );
}
 

Popover Right

import React, { useRef } from "react";
import Button from "@material-tailwind/react/Button";
import Popover from "@material-tailwind/react/Popover";
import PopoverContainer from "@material-tailwind/react/PopoverContainer";
import PopoverHeader from "@material-tailwind/react/PopoverHeader";
import PopoverBody from "@material-tailwind/react/PopoverBody";

export default function Popover() {
    const buttonRef = useRef();

    return (
        <>
            <Button color="lightBlue" ref={buttonRef} ripple="light">
                Popover right
            </Button>

            <Popover placement="right" ref={buttonRef}>
                <PopoverContainer>
                    <PopoverHeader>Popover right</PopoverHeader>
                    <PopoverBody>
                        And here's some amazing content. It's very engaging. Right?
                    </PopoverBody>
                </PopoverContainer>
            </Popover>
        </>
    );
}
 

Popover Top

import React, { useRef } from "react";
import Button from "@material-tailwind/react/Button";
import Popover from "@material-tailwind/react/Popover";
import PopoverContainer from "@material-tailwind/react/PopoverContainer";
import PopoverHeader from "@material-tailwind/react/PopoverHeader";
import PopoverBody from "@material-tailwind/react/PopoverBody";

export default function Popover() {
    const buttonRef = useRef();

    return (
        <>
            <Button color="lightBlue" ref={buttonRef} ripple="light">
                Popover top
            </Button>

            <Popover placement="top" ref={buttonRef}>
                <PopoverContainer>
                    <PopoverHeader>Popover top</PopoverHeader>
                    <PopoverBody>
                        And here's some amazing content. It's very engaging. Right?
                    </PopoverBody>
                </PopoverContainer>
            </Popover>
        </>
    );
}
 

Popover Bottom

import React, { useRef } from "react";
import Button from "@material-tailwind/react/Button";
import Popover from "@material-tailwind/react/Popover";
import PopoverContainer from "@material-tailwind/react/PopoverContainer";
import PopoverHeader from "@material-tailwind/react/PopoverHeader";
import PopoverBody from "@material-tailwind/react/PopoverBody";

export default function Popover() {
    const buttonRef = useRef();

    return (
        <>
            <Button color="lightBlue" ref={buttonRef} ripple="light">
                Popover bottom
            </Button>

            <Popover placement="bottom" ref={buttonRef}>
                <PopoverContainer>
                    <PopoverHeader>Popover bottom</PopoverHeader>
                    <PopoverBody>
                        And here's some amazing content. It's very engaging. Right?
                    </PopoverBody>
                </PopoverContainer>
            </Popover>
        </>
    );
}