# @elemental-ui-alpha/popover

> Popovers are small overlays that open on demand. They let users access additional content and actions without cluttering the page.

Latest version **0.0.2** (published 2020-04-24) · 0 weekly downloads

## Install

```sh
npm install @elemental-ui-alpha/popover
pnpm add @elemental-ui-alpha/popover
yarn add @elemental-ui-alpha/popover
bun add @elemental-ui-alpha/popover
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2020-04-24 |
| First published | 2020-04-23 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 24.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | dsf-release-bot, mitchellhamilton |

## Links

- npm: https://www.npmjs.com/package/@elemental-ui-alpha/popover
- npm.io page: https://npm.io/package/@elemental-ui-alpha/popover

## Dependencies (6)

- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.8.3
- [@elemental-ui-alpha/core](https://npm.io/package/@elemental-ui-alpha/core.md) ^0.0.2
- [@elemental-ui-alpha/theme](https://npm.io/package/@elemental-ui-alpha/theme.md) ^0.0.0
- [@elemental-ui-alpha/utils](https://npm.io/package/@elemental-ui-alpha/utils.md) ^0.0.2
- [@elemental-ui-alpha/popper](https://npm.io/package/@elemental-ui-alpha/popper.md) ^0.0.2

## Recent versions

- 0.0.2 (latest) — 2020-04-24
- 0.0.1 — 2020-04-23
- 0.0.0 — 2020-04-23

## README

# Popover

<!-- prettier-ignore-start -->
```jsx
import { Popover, PopoverDialog, usePopoverDialog } from '@elemental-ui-alpha/popover';
```
<!-- prettier-ignore-end -->

## Usage

### Component

Most of the time you will be able to use `Popover`. This compound component
takes a `trigger` element and wires it up to the dialog for you.

```jsx live
<Popover trigger={<Button>trigger</Button>}>
  <Box padding="medium">Some popover content</Box>
</Popover>
```

### Hook

For situations where you need more control, like access to refs and handlers,
you will need to combine the `PopoverDialog` with the `usePopoverDialog` hook.

```jsx live
const { isOpen, dialog, trigger } = usePopoverDialog('top');

return (
  <>
    <Button ref={trigger.ref} {...trigger.props}>
      {isOpen ? 'close' : 'open'}
    </Button>
    {isOpen && (
      <PopoverDialog ref={dialog.ref} {...dialog.props}>
        <Box padding="medium">Some popover content</Box>
      </PopoverDialog>
    )}
  </>
);
```

## Placement

As a property of the `Popover` component, and the only argument to the
`usePopoverDialog` hook.

Where, in relation to the trigger, to place the dialog:

- `auto`
- `left`
- `right`
- `top`
- `bottom` (default)
- `auto-start`
- `auto-end`
- `top-start`
- `top-end`
- `bottom-start`
- `bottom-end`
- `right-start`
- `right-end`
- `left-start`
- `left-end`

```jsx live
<Popover trigger={<Button>trigger</Button>} placement="left-start">
  <Box padding="medium" width={220}>
    <Heading level="4">Placement</Heading>
    <Text as="p" marginTop="small">
      Some popover content, that goes on for a bit to illustrate placement.
    </Text>
  </Box>
</Popover>
```

---
_Source: https://npm.io/package/@elemental-ui-alpha/popover · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._