Back to Bootstrap HubPractice BootstrapInterview Bootstrap

Nearby lessons

26 of 39
BS5 ModalBS5 TooltipBS5 PopoverBS5 ToastBS5 Scrollspy

šŸ“Œ BS5 Popover

šŸ“Œ What Are Bootstrap 5 Popovers?

Popovers are click-triggered overlays with a title and body. Use data-bs-toggle="popover", data-bs-title (or title), and data-bs-content. Popovers require JavaScript: new bootstrap.Popover(element) for each trigger.

šŸ“Œ Basic Popover (data-bs-toggle, data-bs-title, data-bs-content)

data-bs-toggle="popover" ā€“ enables the component. data-bs-title ā€“ heading (or use title). data-bs-content ā€“ body text. Initialize with new bootstrap.Popover(el).

šŸ…±ļø

bootstrap Designer

Live Component Playground

html Source
Loading...
Built with Bootstrap 5.3 ā€¢ Enterprise Ready

šŸ“ Popover Placement (data-bs-placement)

data-bs-placement ā€“ where the popover appears: top, right, bottom, left, or auto.

šŸ…±ļø

bootstrap Designer

Live Component Playground

html Source
Loading...
Built with Bootstrap 5.3 ā€¢ Enterprise Ready

āœ… Popover Best Practices

  • Initialize with JavaScript: new bootstrap.Popover(element).
  • Use data-bs-title and data-bs-content for title and body.
  • Use data-bs-placement to control position.

šŸ§  Test Your Knowledge

3 Questions

Progress: 0 / 3
Keep Going!BS5 Toast