# Info popover

## Overview

_[Design to fill]_

- **When to use**: _[Design to fill]_
- **When not to use**: _[Design to fill]_

## Anatomy

_[Design to fill]_

## Props / API

### `InfoPopover`

| Prop       | Type           | Default | Description                                            |
| ---------- | -------------- | ------- | ------------------------------------------------------ |
| `children` | `ReactElement` | -       | Single, non-fragment element that acts as the trigger. |
| `title`    | `string`       | -       | Heading rendered as the popover title.                 |
| `text`     | `string`       | -       | Body copy rendered as the popover description.         |

Built on Base UI's `Popover`.

Two additional props exist for testing and documentation only and should not be used in production: `unsafe_open` (`boolean`) forces the open state, and `unsafe_side` forces the side the popover is positioned on.

## States

- Closed (idle)
- Open

## Code examples

```tsx
import { Icon, InfoPopover } from "@mylighthouse/prism-react";

export default function InfoPopoverExample(): React.JSX.Element {
  return (
    <InfoPopover
      title="Occupancy"
      text="The percentage of available rooms that were booked over a given period."
    >
      <Icon name="circle-information-outline" size="small" />
    </InfoPopover>
  );
}
```

## A11y intent

_[Design to fill]_

- The help text is reachable on mobile.
- `title` and `text` are wired to the popover as its `Title` and `Description`, so they are programmatically associated with the popup.
- Opens on hover (250ms delay) and via the trigger; ensure the trigger is keyboard operable.

## Cross-references

- **[Popover](./popover.md)**: general-purpose popover for richer, interactive overlay content.