Bootstrap Popover Plugin

Bootstrap Popover is a small overlay that appears when a user clicks or hovers over an element. Unlike tooltips, popovers can contain more content, including headings and HTML, making them ideal for extra info, menus, or interactive content.

Available in Bootstrap 3, 4, and 5. Requires JavaScript/jQuery (Bootstrap 3/4) or Bootstrap JS (Bootstrap 5).

✅ Basic Popover



 

Key Points:

  • data-toggle="popover" → Activates popover.

  • title="..." → Popover heading (optional).

  • data-content="..." → Popover body text.

  • Needs JavaScript initialization (Bootstrap 3/4):



 

🔹 Popover Placement

Popover can appear top, bottom, left, or right:



 

  • data-placement="top|bottom|left|right" → Sets popover position.

🔹 Popover Trigger Options

By default, popovers appear on click. You can change triggers:



 

  • data-trigger="click|hover|focus|manual" → Controls how popover is triggered.

🔹 Popover with HTML Content



 

  • data-html="true" → Enables HTML inside title or content.

🔹 Popover via JavaScript



 

  • Useful for dynamic or programmatically generated content.

✔ Summary of Popover Features

Feature Supported
Click or hover triggered ✔️
Custom placement (top, bottom, left, right) ✔️
Heading and body content ✔️
HTML content inside popover ✔️
Works on buttons, links, images, inputs ✔️
Programmatically controlled via JS ✔️

You may also like...