- Bootstrap 4 Tutorial
- Bootstrap 4 - Home
- Bootstrap 4 - Overview
- Bootstrap 4 - Environment Setup
- Bootstrap 4 - Layout
- Bootstrap 4 - Grid System
- Bootstrap 4 - Content
- Bootstrap 4 - Components
- Bootstrap 4 - Utilities
- Differences Between Bootstrap 3 and 4
- Bootstrap 4 Useful Resources
- Bootstrap 4 - Quick Guide
- Bootstrap 4 - Useful Resources
- Bootstrap 4 - Discussion
Bootstrap 4 - Popovers
Description
Popover is similar to tooltip, offering an extended view complete with a heading. For the popover to activate, a user just needs to click on an element.
Basic Popover
Popover can be created by using data-toggle = "popover" attribute and content can be provided for the popover by using data-content attribute.
The following example demonstrates basic popover −
Example
<html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous"> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <title>Bootstrap 4 Example</title> </head> <body> <div class = "container"> <h2>Basic Popover</h2> <button type = "button" class = "btn btn-info" data-toggle = "popover" title = "Popover title" data-content = "Popover content goes here...">Basic Popover</button> </div> <script> $(document).ready(function(){ $('[data-toggle = "popover"]').popover(); $('[data-toggle="tooltip"]').tooltip(); }); </script> <!-- jQuery library --> <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin = "anonymous"> </script> <!-- Popper --> <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin = "anonymous"> </script> <!-- Latest compiled and minified Bootstrap JavaScript --> <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous"> </script> </body> </html>
It will produce the following result −
Output
Popover Directions
There are four options such as top, bottom, left and right aligned to change the direction of popover by using the data-placement attribute −
The following example demonstrates the popover directions −
Example
<html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous"> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <title>Bootstrap 4 Example</title> </head> <body> <div class = "container"> <br> <br> <h2>Popover Directions</h2> <br> <button type = "button" class = "btn btn-lg btn-info" data-container = "body" data-toggle = "popover" data-placement = "top" data-content = "Opens at Top side of the button.">Top</button> <button type = "button" class = "btn btn-lg btn-info" data-container = "body" data-toggle = "popover" data-placement = "right" data-content = "Opens at Right side of the button.">Right</button> <button type = "button" class = "btn btn-lg btn-info" data-container = "body" data-toggle = "popover" data-placement = "bottom" data-content = "Opens at Bottom side of the button.">Bottom</button> <button type = "button" class = "btn btn-lg btn-info" data-container = "body" data-toggle = "popover" data-placement = "left" data-content = "Opens at Left Side of the button.">Left</button> </div> <script> $(document).ready(function(){ $('[data-toggle = "popover"]').popover(); $('[data-toggle = "tooltip"]').tooltip(); }); </script> <!-- jQuery library --> <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin = "anonymous"> </script> <!-- Popper --> <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin = "anonymous"> </script> <!-- Latest compiled and minified Bootstrap JavaScript --> <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous"> </script> </body> </html>
It will produce the following result −
Output
Closing Popover and Disabled Element
Popover can be closed when clicking outside the element by using the data-trigger="focus" attribute. The popover element can be disabled with the help of disabled attribute.
The following example demonstrates this −
Example
<html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous"> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <title>Bootstrap 4 Example</title> </head> <body> <div class = "container"> <h2>Closing Popover</h2> <a tabindex = "0" class = "btn btn-info" role = "button" data-toggle = "popover" data-trigger = "focus" title = "Popover" data-content = "Click outside to dismiss the popover">Dismissible Popover</a> <br> <br> <h2>Disabled Element</h2> <span class = "d-inline-block" data-toggle = "popover" data-content = "This button is disabled"> <button class = "btn btn-info" style = "pointer-events: none;" type = "button" disabled>Button</button> </span> </div> <script> $(document).ready(function(){ $('[data-toggle = "popover"]').popover(); $('[data-toggle = "tooltip"]').tooltip(); }); </script> <!-- jQuery library --> <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin = "anonymous"> </script> <!-- Popper --> <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin = "anonymous"> </script> <!-- Latest compiled and minified Bootstrap JavaScript --> <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous"> </script> </body> </html>
It will produce the following result −