The responsive layout is in early preview. Please report any bugs.

Popover

A Popover is used for displaying additional rich content on top of something.

Status: alpha
Version: 6.0.0
Sources: Github
Storybook
Import from: @twilio-paste/core/popover — or — @twilio-paste/popover

Using alpha components in your product

Alpha components are ready for you to use in production. Components such as Popover are likely to not see any API changes. This is only an alpha due to the lack of documentation and a matching Sketch symbol. Feel free to share your experience using this component by starting a discussion on GitHub. We are also looking for a contributor to symbolize this component in Sketch. Interested? Reach out!

Guidelines#

The Popover component is a non-modal dialog that is commonly used for displaying additional rich content above your UI.

Accessibility#

Popovers and non-modal dialogs follow these accessibility guidelines:

There must be a focusable element inside the popover.
There should be a close button so screen readers have a specific close action to target.
A Popover is a focus trap, and focus is placed inside it when it's shown.
A Popover must be triggered by an explicit user action, e.g. clicking a button.

Examples#

const PopoverExample = () => {
  return (
    <PopoverContainer baseId="popover-example">
      <PopoverButton variant="primary">✊ Action</PopoverButton>
      <Popover aria-label="Popover">
        <Heading as="h3" variant="heading30">Heads up!</Heading>
        <Separator orientation="horizontal" verticalSpacing="space50" />
        <Text as="span">
          Black Lives Matter. We stand with the Black community
        </Text>
        <Separator orientation="horizontal" verticalSpacing="space50" />
        <Button onClick={() => {}} variat="pimary">Agree</Button>
      </Popover>
    </PopoverContainer>
  );
};

render(
  <PopoverExample />
)

const PopoverExample = () => {
  return (
    <PopoverContainer baseId="popover-example">
      <PopoverButton variant="primary">✊ Action</PopoverButton>
      <Popover aria-label="Popover">
        <Heading as="h3" variant="heading30">Heads up!</Heading>
        <Separator orientation="horizontal" verticalSpacing="space50" />
        <Text as="span">
          Black Lives Matter. We stand with the Black community
        </Text>
        <Separator orientation="horizontal" verticalSpacing="space50" />
        <Button onClick={() => {}} variat="pimary">Agree</Button>
      </Popover>
    </PopoverContainer>
  );
};
render(
  <PopoverExample />
)

Controlling placement#

The placement of the popover is configurable via the placement prop. The available placement options are available in the props description here.

const PopoverRightExample = () => {
  return (
    <PopoverContainer baseId="popover-right-example" placement="right-start">
      <PopoverButton variant="primary">Open popover</PopoverButton>
      <Popover aria-label="Popover">
        <Text as="span">
          This is the Twilio styled popover that you can use in all your applications.
        </Text>
      </Popover>
    </PopoverContainer>
  );
};

render(
  <PopoverRightExample />
)

const PopoverRightExample = () => {
  return (
    <PopoverContainer baseId="popover-right-example" placement="right-start">
      <PopoverButton variant="primary">Open popover</PopoverButton>
      <Popover aria-label="Popover">
        <Text as="span">
          This is the Twilio styled popover that you can use in all your applications.
        </Text>
      </Popover>
    </PopoverContainer>
  );
};
render(
  <PopoverRightExample />
)

Anatomy#

PopoverButton#

See the button component.

Property	Default token	Modifiable?
background-color	color-background-body	No
border-width	border-width-10	No
border-color	color-border-lighter	No
border-radius	border-radius-20	No
box-shadow	shadow-card	No
max-width	size-30	No
padding	space-50	No
padding-left	space-70	No
padding-right	space-70	No
z-index	z-index-80	No

Usage Guide#

API#

Installation#

yarn add @twilio-paste/popover - or - yarn add @twilio-paste/core

Usage#

import {Popover, PopoverContainer, PopoverButton} from '@twilio-paste/popover';
const PopoverExample: React.FC = () => {
  return (
    <PopoverContainer baseId="popover-example">
      <PopoverButton variant="primary">Open popover</PopoverButton>
      <Popover aria-label="Popover">Popover content</Popover>
    </PopoverContainer>
  );
};

Props#

`baseId?: string`

Sets the ID that will serve as a base for all the items IDs.

`gutter?: string`

Sets the offset between the reference and the popover on the main axis.

`placement?: "auto-start" | "auto" | "auto-end" | "top-start...`

Sets the placement of popover in relation to the PopoverButton. Available options include:

auto-start
auto-end
auto
top-start
top-end
top
bottom-start
bottom-end
bottom
right-start
right-end
right
left-start
left-end
left

`aria-label: string`

Required label for this Popover component. Titles the entire popover context for screen readers.

Popover

Using alpha components in your product

Guidelines.css-1p5xx02{-webkit-text-decoration:none;text-decoration:none;margin-left:0.5rem;color:rgb(96,107,133);}.css-1p5xx02:hover{-webkit-text-decoration:underline;text-decoration:underline;}#

About Popover#

Popover compared to Tooltip#

Accessibility#

Examples#

Basic Popover#

Controlling placement#

Anatomy#

PopoverButton#

Popover#

Usage Guide#

API#

Installation#

Usage#

Props#

Popover Container#

baseId?: string

gutter?: string

placement?: "auto-start" | "auto" | "auto-end" | "top-start...

Popover#

aria-label: string

6.0.0#

Patch Changes#

5.0.1#

Patch Changes#

5.0.0#

Minor Changes#

Patch Changes#

4.0.1#

Patch Changes#

4.0.0#

Patch Changes#

3.0.3#

Patch Changes#

3.0.2#

Patch Changes#

3.0.1#

Patch Changes#

3.0.0#

Patch Changes#

2.0.1#

Patch Changes#

2.0.0#

Patch Changes#

1.1.1link takes you to an external page (2021-01-25)

Features#

1.0.57link takes you to an external page (2021-01-15)

1.0.56link takes you to an external page (2021-01-14)

1.0.55link takes you to an external page (2021-01-14)

1.0.54link takes you to an external page (2021-01-13)

1.0.53link takes you to an external page (2021-01-07)

1.0.52link takes you to an external page (2020-12-17)

1.0.51link takes you to an external page (2020-12-17)

1.0.50link takes you to an external page (2020-12-15)

1.0.49link takes you to an external page (2020-12-11)

1.0.48link takes you to an external page (2020-12-11)

1.0.47link takes you to an external page (2020-12-09)

1.0.46link takes you to an external page (2020-12-03)

1.0.45link takes you to an external page (2020-12-02)

1.0.44link takes you to an external page (2020-11-16)

1.0.43link takes you to an external page (2020-11-11)

1.0.42link takes you to an external page (2020-11-10)

1.0.41link takes you to an external page (2020-11-09)

1.0.40link takes you to an external page (2020-11-06)

1.0.39link takes you to an external page (2020-11-05)

1.0.38link takes you to an external page (2020-11-02)

1.0.37link takes you to an external page (2020-10-30)

1.0.36link takes you to an external page (2020-10-29)

1.0.35link takes you to an external page (2020-10-23)

1.0.34link takes you to an external page (2020-10-22)

1.0.33link takes you to an external page (2020-10-21)

1.0.32link takes you to an external page (2020-10-19)

1.0.31link takes you to an external page (2020-10-15)

1.0.30link takes you to an external page (2020-10-13)

1.0.29link takes you to an external page (2020-10-09)

1.0.28link takes you to an external page (2020-10-07)

1.0.27link takes you to an external page (2020-10-07)

1.0.26link takes you to an external page (2020-10-07)

Guidelines#

`baseId?: string`

`gutter?: string`

`placement?: "auto-start" | "auto" | "auto-end" | "top-start...`

`aria-label: string`

1.1.1 (2021-01-25)

1.0.57 (2021-01-15)

1.0.56 (2021-01-14)

1.0.55 (2021-01-14)

1.0.54 (2021-01-13)

1.0.53 (2021-01-07)

1.0.52 (2020-12-17)

1.0.51 (2020-12-17)

1.0.50 (2020-12-15)

1.0.49 (2020-12-11)

1.0.48 (2020-12-11)

1.0.47 (2020-12-09)

1.0.46 (2020-12-03)

1.0.45 (2020-12-02)

1.0.44 (2020-11-16)

1.0.43 (2020-11-11)

1.0.42 (2020-11-10)

1.0.41 (2020-11-09)

1.0.40 (2020-11-06)

1.0.39 (2020-11-05)

1.0.38 (2020-11-02)

1.0.37 (2020-10-30)

1.0.36 (2020-10-29)

1.0.35 (2020-10-23)

1.0.34 (2020-10-22)

1.0.33 (2020-10-21)

1.0.32 (2020-10-19)

1.0.31 (2020-10-15)

1.0.30 (2020-10-13)

1.0.29 (2020-10-09)

1.0.28 (2020-10-07)

1.0.27 (2020-10-07)

1.0.26 (2020-10-07)

1.0.25 (2020-10-07)

1.0.24 (2020-09-28)

1.0.23 (2020-09-22)

1.0.22 (2020-09-21)

1.0.21 (2020-09-15)

1.0.20 (2020-09-15)

1.0.19 (2020-09-14)

1.0.18 (2020-09-10)

1.0.17 (2020-09-09)

1.0.16 (2020-09-09)

1.0.15 (2020-09-08)

1.0.14 (2020-09-08)

1.0.13 (2020-09-03)

1.0.12 (2020-09-02)

1.0.11 (2020-08-31)

1.0.10 (2020-08-31)

1.0.9 (2020-08-31)

1.0.8 (2020-08-27)

1.0.7 (2020-08-24)

1.0.6 (2020-08-19)

1.0.5 (2020-08-12)

1.0.4 (2020-08-12)

1.0.3 (2020-08-12)

1.0.2 (2020-08-12)

1.0.1 (2020-08-06)

0.1.25 (2020-08-04)

0.1.24 (2020-08-04)

0.1.23 (2020-07-31)

0.1.22 (2020-07-30)

0.1.21 (2020-07-29)

0.1.20 (2020-07-28)

0.1.19 (2020-07-22)

0.1.18 (2020-07-20)

0.1.17 (2020-07-15)

0.1.16 (2020-07-15)

0.1.15 (2020-07-14)

0.1.14 (2020-07-14)

0.1.13 (2020-07-08)

0.1.12 (2020-07-02)

0.1.11 (2020-07-02)

0.1.10 (2020-07-01)

0.1.9 (2020-07-01)