# `PUI.Popover`

Popover and tooltip components using Floating UI for positioning.

## Base Popover

The base popover provides low-level building blocks for custom popover UIs:

    <.popover_base
      id="my-popover"
      phx-hook="PUI.Popover"
      data-placement="bottom"
    >
      <.button aria-haspopup="menu">Click Me</.button>

      <:popup class="aria-hidden:hidden block p-4 bg-popover rounded-md shadow-md">
        <p>Popover content here</p>
      </:popup>
    </.popover_base>

## Tooltip

Tooltips appear on hover with configurable placement:

    <.tooltip id="tooltip-1" placement="top">
      <.button>Hover me</.button>
      <:tooltip>This is a tooltip</:tooltip>
    </.tooltip>

### Placement Options

    <.tooltip placement="top">...</.tooltip>
    <.tooltip placement="bottom">...</.tooltip>
    <.tooltip placement="left">...</.tooltip>
    <.tooltip placement="right">...</.tooltip>

### Variants

    <.tooltip variant="default">...</.tooltip>
    <.tooltip variant="light">...</.tooltip>
    <.tooltip variant="dark">...</.tooltip>
    <.tooltip variant="unstyled">...</.tooltip>

### Custom Arrow Color

    <.tooltip arrow_class="bg-blue-500 fill-blue-500">...</.tooltip>

## With Icons

    <.tooltip id="icon-tooltip" placement="bottom">
      <.icon name="hero-information-circle" class="size-5" />
      <:tooltip>More information about this</:tooltip>
    </.tooltip>

## Rich Content

    <.tooltip id="rich-tooltip">
      <.button>Hover for details</.button>
      <:tooltip>
        <div class="w-[200px]">
          <img src="..." class="rounded-t-md" />
          <div class="p-2">
            <p class="font-medium">Title</p>
            <p class="text-sm">Description text</p>
          </div>
        </div>
      </:tooltip>
    </.tooltip>

## Attributes (base/1)

| Attribute | Type | Default | Description |
|-----------|------|---------|-------------|
| `id` | `string` | required | Unique identifier |
| `hook` | `string` | `"Popover"` | Phoenix hook name |

## Attributes (tooltip/1)

| Attribute | Type | Default | Description |
|-----------|------|---------|-------------|
| `id` | `string` | auto-generated | Unique identifier |
| `placement` | `string` | `"top"` | Tooltip position |
| `variant` | `string` | `"default"` | Visual variant: `"default"` (dark), `"light"`, `"dark"`, `"unstyled"` |
| `arrow_class` | `string` | `""` | Custom CSS classes for the arrow element |
| `class` | `string` | `""` | Additional CSS classes |

## Slots (base/1)

| Slot | Description |
|------|-------------|
| `trigger` | The element that triggers the popover |
| `popup` | The popover content |
| `inner_block` | Alternative to trigger slot |

## Slots (tooltip/1)

| Slot | Description |
|------|-------------|
| `inner_block` | The element that triggers the tooltip |
| `tooltip` | The tooltip content |

# `base`

## Attributes

* `id` (`:string`) (required)
* `variant` (`:string`) - Defaults to `"default"`. Must be one of `"default"`, or `"unstyled"`.
* `hook` (`:string`) - Defaults to `"Popover"`.
* Global attributes are accepted. the arbitrary HTML attributes to add to the flash container.
## Slots

* `trigger` - Trigger for the popover. Accepts attributes:

  * `class` (`:string`) - Trigger class.
  * `role` (`:string`) - Trigger aria role.
* `popup` - Popup for the popover. Accepts attributes:

  * `class` (`:string`) - Popup class.
  * `role` (`:string`) - Popup role.
* `inner_block` - Inner block / children for the popover, can be used for non <button> custom trigger.

# `tooltip`

## Attributes

* `id` (`:string`)
* `class` (`:string`) - Defaults to `""`.
* `container_class` (`:string`) - Defaults to `""`.
* `variant` (`:string`) - Defaults to `"default"`. Must be one of `"default"`, `"light"`, `"dark"`, or `"unstyled"`.
* `arrow_class` (`:string`) - Defaults to `""`.
* `placement` (`:string`) - Defaults to `"top"`. Must be one of `"top"`, `"bottom"`, `"left"`, or `"right"`.
## Slots

* `inner_block`
* `tooltip` - Accepts attributes:

  * `class` (`:string`)

---

*Consult [api-reference.md](api-reference.md) for complete listing*