<.dm_popover id="popover-single-default">
  <:trigger :let={trigger_attrs}>
    <button type="button" class="btn btn-primary" {trigger_attrs}>Click me</button>
  </:trigger>
  Popover content here
</.dm_popover>

<.dm_popover id="popover-single-top-example" placement="top">
  <:trigger :let={trigger_attrs}>
    <button type="button" class="btn btn-secondary" {trigger_attrs}>Open above</button>
  </:trigger>
  Anchored above the command invoker.
</.dm_popover>

<.dm_popover id="popover-single-with-arrow" placement="bottom" arrow>
  <:trigger :let={trigger_attrs}>
    <button type="button" class="btn" {trigger_attrs}>With arrow</button>
  </:trigger>
  This popover has an arrow pointing to the trigger.
</.dm_popover>

<.dm_popover id="popover-placements-top" placement="top">
  <:trigger :let={trigger_attrs}>
    <button type="button" class="btn" {trigger_attrs}>Top</button>
  </:trigger>
  Placed above the trigger.
</.dm_popover>
<.dm_popover id="popover-placements-left" placement="left">
  <:trigger :let={trigger_attrs}>
    <button type="button" class="btn" {trigger_attrs}>Left</button>
  </:trigger>
  Placed to the left.
</.dm_popover>
<.dm_popover id="popover-placements-right" placement="right">
  <:trigger :let={trigger_attrs}>
    <button type="button" class="btn" {trigger_attrs}>Right</button>
  </:trigger>
  Placed to the right.
</.dm_popover>

<.dm_popover id="popover-aligned-placements-top-start" placement="top-start">
  <:trigger :let={trigger_attrs}>
    <button type="button" class="btn" {trigger_attrs}>Top-start</button>
  </:trigger>
  Aligned to start edge, above.
</.dm_popover>
<.dm_popover id="popover-aligned-placements-top-end" placement="top-end">
  <:trigger :let={trigger_attrs}>
    <button type="button" class="btn" {trigger_attrs}>Top-end</button>
  </:trigger>
  Aligned to end edge, above.
</.dm_popover>
<.dm_popover id="popover-aligned-placements-bottom-start" placement="bottom-start">
  <:trigger :let={trigger_attrs}>
    <button type="button" class="btn" {trigger_attrs}>Bottom-start</button>
  </:trigger>
  Aligned to start edge, below.
</.dm_popover>
<.dm_popover id="popover-aligned-placements-bottom-end" placement="bottom-end">
  <:trigger :let={trigger_attrs}>
    <button type="button" class="btn" {trigger_attrs}>Bottom-end</button>
  </:trigger>
  Aligned to end edge, below.
</.dm_popover>