# popover.info

More detail about something, opened on demand: what a setting does, where a number comes from

Component: [`<Popover>`](https://www.prongs.dev/docs/components/popover.md) · Renders: `<div popover>` · Profile: [UI](https://www.prongs.dev/docs/intents/ui.md)

## Example

```tsx
<Popover intent="popover.info" label="What it holds" trigger={<Action intent="action.reveal">Open</Action>}>
  …
</Popover>
```

## Choosing between neighbours

Find the row that describes your element, and use the intent on the right.

| If it is for… | Use |
|---|---|
| More detail about something, opened on demand: what a setting does, where a number comes from | `popover.info` (this page) |
| Anything the user acts on | [`popover.menu`](https://www.prongs.dev/docs/intents/popover/menu.md) |

## Connections

Declared in the registry, both directions. Where an intent is used in your own code is something check and the gallery see; this site has no app code.

- Built from: [`surface.floating`](https://www.prongs.dev/docs/intents/ui.md#surface-floating)

## For registry authors

**Starter intents.** These are the intents `prongs add` puts in your registry, shown in this site’s theme. Yours are your own `registry.ts`: rename, restyle and add to them, and see them with `prongs add gallery`.

What this intent is built from and its entry in `components/prongs/registry.ts`. You only need this to change how it looks or to add an intent like it.

How popover.info resolves, and its definition

Each layer adds to the one before it; a later class wins over an earlier one that sets the same thing.

- [`surface.floating`](https://www.prongs.dev/docs/intents/ui.md#surface-floating) — Floats next to the element that opened it, flipping to stay on screen. Hidden while closed, whatever display the intent sets

  ```
  surface-overlay m-1 inset-auto rounded-lg border
  border-surface-border shadow-lg
  [position-area:bottom_span-right]
  [position-try-fallbacks:flip-block,flip-inline] origin-top-left
  data-[align=end]:origin-top-right
  data-[align=end]:[position-area:bottom_span-left]
  transition-[opacity,scale,display,overlay] transition-discrete
  duration-150 ease-out [&:not(:popover-open)]:hidden
  [&:not(:popover-open)]:scale-95 [&:not(:popover-open)]:opacity-0
  starting:[&:popover-open]:scale-95
  starting:[&:popover-open]:opacity-0
  motion-reduce:transition-none
  ```

- `popover.info` (this page) — More detail about something, opened on demand: what a setting does, where a number comes from

  ```
  max-w-72 p-3 text-sm
  ```

Final classes

```
surface-overlay m-1 inset-auto rounded-lg border
border-surface-border shadow-lg
[position-area:bottom_span-right]
[position-try-fallbacks:flip-block,flip-inline] origin-top-left
data-[align=end]:origin-top-right
data-[align=end]:[position-area:bottom_span-left]
transition-[opacity,scale,display,overlay] transition-discrete
duration-150 ease-out [&:not(:popover-open)]:hidden
[&:not(:popover-open)]:scale-95 [&:not(:popover-open)]:opacity-0
starting:[&:popover-open]:scale-95
starting:[&:popover-open]:opacity-0
motion-reduce:transition-none max-w-72 p-3 text-sm
```

Definition

```ts
'popover.info': {
  kind: 'semantic',
  description: 'More detail about something, opened on demand: what a setting does, where a number comes from',
  refs: ['surface.floating'],
  binding: { classes: 'max-w-72 p-3 text-sm' },
  notFor: [{ context: 'anything the user acts on', instead: 'popover.menu' }],
},
```