Bootstrap Popover
The Popover plugin is similar to tooltips; it is a pop-up box that appears when the user clicks on an element. The difference is that the popover can contain much more content. Tip: Plugins can be included individually (using Bootstrap’s individual “popover.
1. Basic Popover Example
Example:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Basic Popover</title>
<link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body class=”p-4″>
<button type=”button” class=”btn btn-secondary” data-toggle=”popover” title=”Popover Title” data-content=”Some content inside the popover”>
Click me for Popover
</button>
<!– Scripts –>
<script src=”https://code.jquery.com/jquery-3.5.1.slim.min.js”></script>
<script src=”https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js”></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script>
<script>
$(document).ready(function(){
$(‘[data-toggle=”popover”]’).popover();
});
</script>
</body>
</html>
Output:
Explanation:
• data-toggle=”popover” → turns the button into a popover trigger.
• title → heading of the popover.
• data-content → main message inside the popover.
• jQuery + Popper.js + Bootstrap JS is required for popover to work.data-toggle=”popover” → turns the button into a popover trigger.
2. Popover with HTML Content
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Basic Popover</title>
<link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body class=”p-4″>
<button type=”button” class=”btn btn-info” data-toggle=”popover” data-html=”true” title=”<strong>Bold Popover Title</strong>” data-content=”<em>Some emphasized content</em>”>
Popover with HTML Content
</button>
<!– Scripts –>
<script src=”https://code.jquery.com/jquery-3.5.1.slim.min.js”></script>
<script src=”https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js”></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script>
<script>
$(document).ready(function(){
$(‘[data-toggle=”popover”]’).popover();
});
</script>
</body>
</html>
Output:
Explanation:
• data-html=”true” → allows HTML like <strong> and <em> inside the popover.
3. Focus-Triggered Popover (Dismiss on Click Away)
Example:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Basic Popover</title>
<link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body class=”p-4″>
<a tabindex=”0″ class=”btn btn-danger” role=”button” data-toggle=”popover” data-trigger=”focus” title=”Dismissible Popover” data-content=”Click anywhere to close this popover”>
Click or Focus on Me
</a>
</body>
</html>
Output:
Explanation:
• data-trigger=”focus” → popover appears on click/focus, disappears on click away.
4. Popover with Custom Placement
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Basic Popover</title>
<link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body class=”p-4″>
<button type=”button” class=”btn btn-warning” data-toggle=”popover” data-placement=”right” title=”Right Popover” data-content=”I’m placed to the right!”>
Popover on the Right
</button>
</body>
</html>
Output:
Explanation:
• data-placement=”right” → shows popover on the right side of the button.
• Other options: “top”, “bottom”, “left”.
Conclusion:
| Feature | Discription |
|---|---|
| data-toggler | Makes the element trigger a popover |
| data-content | The content shown in the popover |
| title | title Optional header of the popover |
| data-html=”true” | data-html=”true” Allows HTML in the popover |
| data-trigger | data-trigger Controls how the popover is triggered |
| data-placement | Controls where the popover appears |
Don’t forget to include jQuery, Popper.js, and Bootstrap JS fo popovers to work.
Add Your Heading Text Here
Add Your Heading Text Here
| Class Name | Discription |
|---|---|
| .btn | The Base class for all Bootstrap button. |
| .btn-primary | Main action button, style with the primary color. |
| .btn-secondary | Less important than primary, usd for secondry action. |
| .btn-success | Shows a successful or positive action. |
| .btn-danger | Used for actions that need caution. |
| .btn-warning | Used for warning or alerts. |
| .btn-info | Used for informational purposes. |
| .btn-light | Light -colored button. |
| .btn-dark | Dark-colored button |
| .btn-outline-* | Creates an outlined (replace * with any color class). |
| .btn-lg, btn-sm | Creates large or small buttons. |
| .btn-block | Makes the button take the full width of its parent. |
| .disabled or disabled | Disables the button so users can’t click it. |
Practice Scenarios
Scenarios 1:Popover on Hover
Excepted Output:
Scenario 2: Bottom-placed Popover with long text
Excepted Output:
A Bootstrap popover is a small overlay that displays additional information or content when triggered, often used for tooltips or annotations.
Yes, this Bootstrap training is completely free. You can access all tutorials and learn Bootstrap at your own pace without any charges.
To make Bootstrap popovers responsive, ensure your design uses relative positioning and adjust with Bootstrap utility classes like .d-none and .d-block based on screen size.
Yes, we offer Bootstrap Popover tutorial in Hindi to help Hindi-speaking students understand the concepts easily. Whether you’re a beginner or intermediate, this course is tailored to your needs.
Yes, you can customize Bootstrap popovers using custom CSS or by overriding Bootstrap variables to match your design requirements.
Use the data-animation attribute or include classes like .fade to add smooth animations when a popover is shown or hidden.
Examples include:
- Popovers on hover
- Popovers with HTML content
- Popovers with custom templates
Bootstrap popovers require JavaScript to function, but you can use inline data-toggle and data-content attributes for basic implementations.
Use the placement option or attribute (top, right, bottom, left) to position the popover relative to the target element.
By default, Bootstrap popovers are accessible but should be tested with ARIA attributes for improved screen reader compatibility.
