Components

Popover(React)

Advanced tooltip for showing detailed content

Version:	`14.16.0` •View source•Changelog•Report issue
Install:	`yarn add @thumbtack/thumbprint-react`
Import:	`import { Popover, PopoverTitle, PopoverBody, PopoverPrimaryButton, PopoverSecondaryButton } from '@thumbtack/thumbprint-react';`

Default

function PopoverDemo() {
    const [isOpen, setIsOpen] = React.useState(true);
    const position = 'top';

    return (
        <div
            style={{
                minHeight: '300px',
                display: 'flex',
                alignItems: 'flex-end',
                justifyContent: 'center',
            }}
        >
            <Popover
                launcher={({ ref }) => (
                    <Button
                        ref={ref}
                        onClick={() => {
                            setIsOpen(!isOpen);
                        }}
                    >
                        Open Popover
                    </Button>
                )}
                isOpen={isOpen}
                onCloseClick={() => {
                    setIsOpen(false);
                }}
                position={position}
                assistiveTitle="New feature"
            >
                <PopoverTitle>New Feature!</PopoverTitle>

                <PopoverBody>You can now estimate jobs from your settings.</PopoverBody>

                <ButtonRow>
                    <PopoverPrimaryButton
                        onClick={() => {
                            console.log(`PopoverPrimaryButton: onClick`);
                        }}
                    >
                        Next
                    </PopoverPrimaryButton>
                    <PopoverSecondaryButton
                        onClick={() => {
                            console.log(`PopoverSecondaryButton: onClick`);
                        }}
                    >
                        Previous
                    </PopoverSecondaryButton>
                </ButtonRow>
            </Popover>
        </div>
    );
}

function PopoverDemo() {
    const [isOpen, setIsOpen] = React.useState(true);
    const position = 'top';
    return (
        <div
            style={{
                minHeight: '300px',
                display: 'flex',
                alignItems: 'flex-end',
                justifyContent: 'center',
            }}
        >
            <Popover
                launcher={({ ref }) => (
                    <Button
                        ref={ref}
                        onClick={() => {
                            setIsOpen(!isOpen);
                        }}
                    >
                        Open Popover
                    </Button>
                )}
                isOpen={isOpen}
                onCloseClick={() => {
                    setIsOpen(false);
                }}
                position={position}
                assistiveTitle="New feature"
            >
                <PopoverTitle>New Feature!</PopoverTitle>
                <PopoverBody>You can now estimate jobs from your settings.</PopoverBody>
                <ButtonRow>
                    <PopoverPrimaryButton
                        onClick={() => {
                            console.log(`PopoverPrimaryButton: onClick`);
                        }}
                    >
                        Next
                    </PopoverPrimaryButton>
                    <PopoverSecondaryButton
                        onClick={() => {
                            console.log(`PopoverSecondaryButton: onClick`);
                        }}
                    >
                        Previous
                    </PopoverSecondaryButton>
                </ButtonRow>
            </Popover>
        </div>
    );
}

Positioned below

function PopoverDemo() {
    const [isOpen, setIsOpen] = React.useState(true);
    const position = 'bottom';

    return (
        <div
            style={{
                minHeight: '300px',
                display: 'flex',
                alignItems: 'flex-start',
                justifyContent: 'center',
            }}
        >
            <Popover
                launcher={({ ref }) => (
                    <Button
                        ref={ref}
                        onClick={() => {
                            setIsOpen(!isOpen);
                        }}
                    >
                        Open Popover
                    </Button>
                )}
                isOpen={isOpen}
                onCloseClick={() => {
                    setIsOpen(false);
                }}
                position={position}
                assistiveTitle="New feature"
            >
                <PopoverTitle>New Feature!</PopoverTitle>

                <PopoverBody>You can now estimate jobs from your settings.</PopoverBody>

                <ButtonRow>
                    <PopoverPrimaryButton
                        onClick={() => {
                            console.log(`PopoverPrimaryButton: onClick`);
                        }}
                    >
                        Next
                    </PopoverPrimaryButton>
                    <PopoverSecondaryButton to="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
                        Learn more
                    </PopoverSecondaryButton>
                </ButtonRow>
            </Popover>
        </div>
    );
}

function PopoverDemo() {
    const [isOpen, setIsOpen] = React.useState(true);
    const position = 'bottom';
    return (
        <div
            style={{
                minHeight: '300px',
                display: 'flex',
                alignItems: 'flex-start',
                justifyContent: 'center',
            }}
        >
            <Popover
                launcher={({ ref }) => (
                    <Button
                        ref={ref}
                        onClick={() => {
                            setIsOpen(!isOpen);
                        }}
                    >
                        Open Popover
                    </Button>
                )}
                isOpen={isOpen}
                onCloseClick={() => {
                    setIsOpen(false);
                }}
                position={position}
                assistiveTitle="New feature"
            >
                <PopoverTitle>New Feature!</PopoverTitle>
                <PopoverBody>You can now estimate jobs from your settings.</PopoverBody>
                <ButtonRow>
                    <PopoverPrimaryButton
                        onClick={() => {
                            console.log(`PopoverPrimaryButton: onClick`);
                        }}
                    >
                        Next
                    </PopoverPrimaryButton>
                    <PopoverSecondaryButton to="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
                        Learn more
                    </PopoverSecondaryButton>
                </ButtonRow>
            </Popover>
        </div>
    );
}

Props

children
required
Contents for the Popover. Usually a PopoverTitle, PopoverBody, and PopoverPrimaryButton
Type
React.ReactNode
launcher
required
A function that renders JSX and receives an object with ref. All of these props must be added to the component within the render prop.
Type
({ ref }: { ref: RefHandler }) => React.ReactNode
onCloseClick
required
Function called when the close button is clicked. You should cause this to set isOpen=false in your parent component.
Type
() => void
position
Position of popover relative to the launcher.
Type
This prop can be one of the following 12 types:
'top-start'
'top'
'top-end'
'bottom-start'
'bottom'
'bottom-end'
'left-start'
'left'
'left-end'
'right-start'
'right'
'right-end'
Default
'top'
isOpen
Whether or not the popover is visible.
Type
boolean
Default
false
container
By default popovers will render right before the </body> tag. Setting the container to inline causes the tooltip to remain where it was added to the DOM. This option is helpful to work around z-index and positioning issues.
Type
This prop can be one of the following 2 types:
'inline'
'body'
Default
'body'
accessibilityLabel
Accessibility title used to describe the content of the popover to screen readers.
Type
string
Default
'Popover'

PopoverTitle

children
required
The contents of the title.
Type
React.ReactNode

PopoverBody

children
required
The contents of the body.
Type
React.ReactNode

PopoverPrimaryButton

children
required
The text of the button.
Type
string
onClick
required
The function to call when the button is clicked.
Type
() => void

PopoverSecondaryButton

children
required
The text of the button.
Type
string
onClick
The function to call when the button is clicked.
Type
() => void
to
Link to visit when the button is clicked. It will be opened in a new tab.
Type
string