Bootstrap 5 TutorialLesson 27Free preview

BS5 Popover

This lesson is part of Bootstrap · All levels

Summary

Popovers are similar to tooltip but can contain longer headings and text bodies, and usually appear when clicked. Activate it with data-bs-toggle="popover", then fill it through data-bs-title and data-bs-content. Just like a tooltip, popovers also need to be initialized with JavaScript.

Key points

Data-bs-toggle="popover" is activating the popover.
Data-bs-title gives the title and data-bs-content gives the message.
Popovers generally appear when clicked, tips when highlighted.
Popover was initialised with new bootstrap.Popover().
When it appears can be set by data-bs-trigger: click, hover, focus.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.