bootstrap
  1. bootstrap-popovers
PreviousNext

Bootstrap Popovers

Bootstrap Popovers are a useful UI component that displays additional content or context on hover or click events. Popovers can be used to show more information about an element, provide user feedback, or as a tooltip for icons or buttons.

Syntax

To create a popover in Bootstrap, you need to use the data-toggle attribute and set it to popover. You also need to provide a data-content attribute with the content you want to display within the popover.

<button type="button" class="btn btn-lg btn-primary" data-bs-toggle="popover" data-bs-title="Popover title"
    data-bs-content="And here's some amazing content. It's very engaging. Right?">
    Click me
</button>

You can also add additional attributes to customize the popover's behavior, placement, and more.

Example

Here is an example of how to create a popover

<button type="button" class="btn btn-lg btn-primary" data-bs-toggle="popover" data-bs-title="Popover title"
    data-bs-content="And here's some amazing content. It's very engaging. Right?">
    Click me
</button>
Try Playground

Directions

Four options are available: top, right, bottom, and left. 

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
  Popover on left
</button>
Try Playground

Explanation

In the example above, we used the data-toggle attribute with the value popover to trigger the popover. We also used the data-content attribute to provide the content for the popover. The btn and btn-primary classes were used to style the button.

Use

Bootstrap Popovers can be used to provide additional information about an element, display tooltips, or give user feedback. They can be triggered on hover or click events and can be customized with additional attributes.

Important Points

  • Bootstrap Popovers are a useful UI component that displays additional content or context on hover or click events.
  • Popovers can be used to show more information about an element, provide user feedback, or as a tooltip for icons or buttons.
  • To create a popover in Bootstrap, you need to use the data-toggle attribute with the value popover.

Summary

Bootstrap Popovers are a great way to add additional context and information to your UI components. By using Popovers, you can provide your users with useful feedback and help them better understand the content on your page.

Spacing UtilitiesTooltips
Published on: