Popover

Display advanced information on hover over an element.

The Popover component is suitable to display advanced information on hover over an element. It is a small box that appears when the user hovers over an element.

Source code

Theme

Storybook

Color

Placement

Size

Shadow

Radius

import { Popover } from '@almond-ui/core';

function App() {
  return (
    <Popover>
      <Popover.Trigger>
        <Button>Hover over me!</Button>
      </Popover.Trigger>
      <Popover.Content>I am the popover content</Popover.Content>
    </Popover>
  );
}

Import

Import the Popover component using the following import statement.

import { Popover } from '@almond-ui/core';

Colors

The following colors are available for the Popover component: white, gray, zinc and slate.

<View>
  <Popover color="white" >
    // ...
  </Popover>

  <Popover color="gray" >
    // ...
  </Popover>

  <Popover color="slate" >
    // ...
  </Popover>

  <Popover color="zinc" >
    // ...
  </Popover>
</View>

Sizes

The following sizes are available for the Popover component: xs, sm, md and lg.

<View>
  <Popover size="xs">
    // ...
  </Popover>

  <Popover size="sm">
    // ...
  </Popover>

  <Popover size="md">
    // ...
  </Popover>

  <Popover size="lg">
    // ...
  </Popover>
</View>

Radiuses

The following radiuses are available for the Popover component: none, sm, base, md, lg and full.

<View>
  <Popover radius="none">
    // ...
  </Popover>

  <Popover radius="sm">
    // ...
  </Popover>

  <Popover radius="base">
    // ...
  </Popover>

  <Popover radius="md">
    // ...
  </Popover>

  <Popover radius="lg">
    // ...
  </Popover>

  <Popover radius="full">
    // ...
  </Popover>
</View>

Shadows

The following shadows are available for the Popover component: none, sm, base and md.

<View>
  <Popover shadow="none" color="white">
    // ...
  </Popover>

  <Popover shadow="sm" color="white">
    // ...
  </Popover>

  <Popover shadow="base" color="white">
    // ...
  </Popover>

  <Popover shadow="md" color="white">
    // ...
  </Popover>
</View>

Placements

Basic placements

The following basic placements are supported by the Popover component: top, bottom, left and right.

<View>
  <Popover placement="top">
    // ...
  </Popover>

  <Popover placement="bottom">
    // ...
  </Popover>

  <Popover placement="left">
    // ...
  </Popover>

  <Popover placement="right">
    // ...
  </Popover>
</View>

Extended placements

Furthermore, the above placements can be combined with the following modifiers: start and end.

Top

<View>
  <Popover placement="top-start">
    // ...
  </Popover>

  <Popover placement="top-end">
    // ...
  </Popover>
</View>

Bottom

<View>
  <Popover placement="bottom-start">
    // ...
  </Popover>

  <Popover placement="bottom-end">
    // ...
  </Popover>
</View>

Left

<View>
  <Popover placement="left-start">
    // ...
  </Popover>

  <Popover placement="left-end">
    // ...
  </Popover>
</View>

Right

<View>
  <Popover placement="right-start">
    // ...
  </Popover>

  <Popover placement="right-end">
    // ...
  </Popover>
</View>

Initial state

The initial state of the Popover component can be controlled by setting the initiallyOpen prop.

<View>
  <Popover initiallyOpen={true}>
    // ...
  </Popover>

  <Popover initiallyOpen={false}>
    // ...
  </Popover>
</View>

Examples

With Card component

The Popover component can be combined with the Card component to create a more complex popover.

<View>
  <Popover
    size="tight"
    color="gray"
    placement="bottom-start"
    withinPortal={true}
  >
    <Popover.Trigger>
      <Button>I am the trigger</Button>
    </Popover.Trigger>
    <Popover.Content>
      <Card shadow="none" size="sm" radius="md">
        <Card.Header className="bg-gray-50">This is a Card Header</Card.Header>
        <Card.Body>This is the body of the card</Card.Body>
        <Card.Footer className="bg-gray-50">And here is the footer</Card.Footer>
      </Card>
    </Popover.Content>
  </Popover>
</View>

With Radio component

<View>
  <Popover size="tight" color="gray" placement="bottom-start" withinPortal={true}>
    <Popover.Trigger>
      <Button color="black">Deploy</Button>
    </Popover.Trigger>
    <Popover.Content>
      <Card shadow="none" size="sm" radius="md">
        <Card.Header className="bg-gray-50">Select deployment target</Card.Header>
        <Card.Body className="flex flex-col space-y-2">
          <Radio
            color="dark"
            name="radio-example"
            size="sm"
            label="Testing"
            description="testing.example.com"
            defaultChecked={true}
          />
          <Radio
            color="dark"
            name="radio-example"
            size="sm"
            label="Staging"
            description="staging.example.com"
          />
          <Radio
            color="dark"
            name="radio-example"
            size="sm"
            label="Production"
            description="example.com"
          />
        </Card.Body>
        <Card.Footer className="bg-gray-50">
          <Button color="black" size="sm" className="w-full">
            Run
          </Button>
        </Card.Footer>
      </Card>
    </Popover.Content>
  </Popover>
</View>

API Reference

Properties

Prop	Type	Description	Default
color	`PopoverColor`	Sets the Popover color	`dark`
initiallyOpen	`boolean`	Sets the initial state of the Popover	`false`
offset	`number`	Sets the Popover offset	`6`
placement	`PopoverPlacement`	Sets the placement of the Popover in relation to the trigger element	`top`
radius	`PopoverRadius`	Sets the Popover radius	`md`
shadow	`PopoverShadow`	Sets the Popover shadow	`none`
size	`PopoverSize`	Sets the Popover size	`sm`
tone	`PopoverTone`	Sets the Popover tone	`solid`
withinPortal	`boolean`	Renders the Popover within a portal	`true`

Types

type PopoverColor =
  | 'white'
  | 'gray'
  | 'slate'
  | 'zinc';

type Alignment = 'start' | 'end';
type Side = 'top' | 'right' | 'bottom' | 'left';
type AlignedPlacement = `${Side}-${Alignment}`;
type PopoverPlacement = Side | AlignedPlacement;

type PopoverRadius = 'none' | 'sm' | 'base' | 'md' | 'lg' | 'full';

type PopoverShadow = 'none' | 'sm' | 'base' | 'md';

type PopoverSize = 'tight' | 'xs' | 'sm' | 'md' | 'lg';

type PopoverTone = 'solid' | 'light';

Accessibility

The Popover component partially adheres to the WAI-ARIA Dialog (Modal) Pattern.

To make the modal dialog fully accessible, aria-labelledby and aria-describedby props should be provided to the Popover component. The aria-labelledby prop should point to the id of the popover header element, and the aria-describedby prop should point to the id of the body element.

Modal Toast