Thumbprint logo

Popover

Advanced tooltip for showing detailed content

Popover

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>
    );
}

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>
    );
}

Props

Popover

  • 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
    | '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
    '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