2.2 KiB
title, summary, bootstrapLink, description
| title | summary | bootstrapLink | description |
|---|---|---|---|
| Popovers | Popovers are used to provide additional information on elements where a simple tooltip is not sufficient. | components/popovers | Provide extra information with popovers. |
Default markup
To create a default popover use:
{% capture html -%} <button type="button" class="btn" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?"
Click to toggle popover {%- endcapture %} {% include "docs/example.html" html=html centered bg="surface-secondary" %}
Four directions
Four options are available: top, right, bottom, and left aligned. Directions are mirrored when using Bootstrap in RTL.
{% capture html -%} <button type="button" class="btn" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover"
Popover on top <button type="button" class="btn" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover"
Popover on right <button type="button" class="btn" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover"
Popover on bottom <button type="button" class="btn" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover"
Popover on left {%- endcapture %} {% include "docs/example.html" html=html centered bg="surface-secondary" %}
Popover on hover
Popover can be triggered in one or more of the following styles: manual, with a click, on focus, and on hover. This one reacts on hover. See more details on the Popover component page of Bootstrap's documentation
{% capture html -%} <button type="button" class="btn btn-primary" data-bs-trigger="hover" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?"
Hover to toggle popover {%- endcapture %} {% include "docs/example.html" html=html centered bg="surface-secondary" %}