Components

Popover(React)

Advanced tooltip for showing detailed content

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

Popover

Default

Positioned below

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

    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