# `LineaUI.Components.Popover`
[🔗](https://github.com/devaction-labs/linea_ui/blob/v0.1.1/lib/linea_ui/components/popover.ex#L1)

LineOne's popover: a white card with an arrow next to its trigger, for more than a tooltip
holds (text, tags, people, a small form).

    <.popover id="lesson">
      <:trigger><.button color="primary">Lessons</.button></:trigger>
      <:title>Group Lesson</:title>
      <p class="mt-2">Lorem ipsum dolor sit amet.</p>
    </.popover>

    <.popover id="john" trigger_on="hover" placement="top" class="w-48 px-4 py-5 text-center">
      <:trigger><div class="avatar size-8">…</div></:trigger>
      …
    </.popover>

The default placement is LineOne's `right-start`, falling back to the bottom and the top when
there is no room. It opens and closes from the browser (`LineaUI.toggle("lesson")`), from the
server (`LineaUI.close(socket, "lesson")`) or from `open`; a click outside and Esc close it and
`on_close` runs however it closed.

# `popover`

Renders a popover.

Events: `on_open` and `on_close` push `%{"id" => id}` when they are event names.

## Attributes

* `id` (`:string`) (required)
* `open` (`:boolean`) - Defaults to `false`.
* `placement` (`:string`) - Defaults to `"right-start"`. Must be one of `"bottom-start"`, `"bottom"`, `"bottom-end"`, `"top-start"`, `"top"`, `"top-end"`, `"left-start"`, `"left"`, `"left-end"`, `"right-start"`, `"right"`, or `"right-end"`.
* `fallbacks` (`:list`) - The sides tried, in order, when the placement has no room. Defaults to `["bottom", "top"]`.
* `offset` (`:integer`) - Pixels between the trigger and the card. Defaults to `12`.
* `trigger_on` (`:string`) - Defaults to `"click"`. Must be one of `"click"`, or `"hover"`.
* `arrow` (`:boolean`) - Defaults to `true`.
* `on_open` (`:any`) - An event name or a `%JS{}`. Defaults to `nil`.
* `on_close` (`:any`) - An event name or a `%JS{}`. Defaults to `nil`.
* `target` (`:any`) - The `phx-target` of `on_open` / `on_close` events. Defaults to `nil`.
* `class` (`:any`) - Merged into the card (`max-w-xs`, `w-72 p-3`...). Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `trigger` (required)
* `title` - LineOne's card title.
* `inner_block`

---

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