Popover

How it works?

Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.

Basic example

Click the accordions below to expand/collapse the accordion content.

<x-popover
    title="Popover title"
    content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</x-popover>

<button type="button"
      class="btn btn-light"
      data-controller="popover"
      data-action="click-&gt;popover#toggle"
      title="Popover title"
      data-bs-content="And here's some amazing content. It's very engaging. Right?"
      data-bs-placement="right"
      data-bs-trigger="click"
      data-bs-container="body">Click to toggle popover</button>

Placement example

Click the accordions below to expand/collapse the accordion content.

<x-popover
    title="Popover top"
    placement="top"
    class="btn btn-primary me-3"
    content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover top</x-popover>

<x-popover
    title="Popover right"
    placement="right"
    class="btn btn-primary me-3"
    content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover right</x-popover>

<x-popover
    title="Popover bottom"
    placement="bottom"
    class="btn btn-primary me-3"
    content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover bottom</x-popover>

<x-popover
    title="Popover left"
    placement="left"
    class="btn btn-primary me-3"
    content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover left</x-popover>

<button type="button"
      class="btn btn-primary me-3"
      data-controller="popover"
      data-action="click-&gt;popover#toggle"
      title="Popover top"
      data-bs-content="And here's some amazing content. It's very engaging. Right?"
      data-bs-placement="top"
      data-bs-trigger="click"
      data-bs-container="body">Click to toggle popover top</button> <button type="button"
      class="btn btn-primary me-3"
      data-controller="popover"
      data-action="click-&gt;popover#toggle"
      title="Popover right"
      data-bs-content="And here's some amazing content. It's very engaging. Right?"
      data-bs-placement="right"
      data-bs-trigger="click"
      data-bs-container="body">Click to toggle popover right</button> <button type="button"
      class="btn btn-primary me-3"
      data-controller="popover"
      data-action="click-&gt;popover#toggle"
      title="Popover bottom"
      data-bs-content="And here's some amazing content. It's very engaging. Right?"
      data-bs-placement="bottom"
      data-bs-trigger="click"
      data-bs-container="body">Click to toggle popover bottom</button> <button type="button"
      class="btn btn-primary me-3"
      data-controller="popover"
      data-action="click-&gt;popover#toggle"
      title="Popover left"
      data-bs-content="And here's some amazing content. It's very engaging. Right?"
      data-bs-placement="left"
      data-bs-trigger="click"
      data-bs-container="body">Click to toggle popover left</button>