Popovers in bootstrap with examples Last Updated : 28 Apr, 2022 Comments Improve Suggest changes Like Article Like Report A Bootstrap Popover is an attribute in bootstrap that can be used to make any website look more dynamic. Popovers are generally used to display additional information about any element and are displayed with a click of a mouse pointer over that element. In the popover, if you click on any element that you include in your script, it will give a particular message as a popover and you can see your message as you defined in the script. It is easy to implement popovers on a website using Bootstrap as you just need to define a few attributes for the element as described below: Syntax: data-toggle="popover" title="Popover Header" data-content="Some content inside the box"The data-toggle attribute defines the Popover, the title attribute defines the Tile for the Popover and the data-content attribute is used to store the content to be displayed in the respective Popover. Include the below javascript in your code to make it work. JavaScript <script> $(document).ready(function(){ $('[data-toggle="popover"]').popover(); }); </script> Example: HTML <!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <!-- Link Bootstrap CSS --> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <h3>Popover Example</h3> <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover"> GeeksforGeeks</a> </div> <script> $(document).ready(function () { $('[data-toggle="popover"]').popover(); }); </script> </body> </html> Output: Different types of Popover orientation in Bootstrap: Top Alignment: In this type of popover alignment, the popover content is displayed at the top of the element on which we have applied this attribute. To align the popover to the top, assign an attribute data-placement = "top". HTML <!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <!-- Bootstrap CSS and JS --> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <h3>Popover Example</h3> <ul class="list-inline"> <li><a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content"> GeeksforGeeks </a> </li> </ul> </div> <script> $(document).ready(function () { $('[data-toggle="popover"]').popover(); }); </script> </body> </html> Output: Left Alignment: In this type of popover alignment, the popover content is displayed at the left of the element on which we have applied this attribute. To align the popover to the top, assign an attribute data-placement = "left". HTML <!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <!-- Bootstrap CSS and JS --> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <h3>Popover Example</h3> <ul class="list-inline"> <li><a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content"> GeeksforGeeks </a> </li> </ul> </div> <script> $(document).ready(function () { $('[data-toggle="popover"]').popover(); }); </script> </body> </html> Output: Right Alignment: In this type of popover alignment, the popover content is displayed at the top of the element on which we have applied this attribute. To align the popover to the top, assign an attribute data-placement = "right". HTML <!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <!-- Bootstrap CSS and JS --> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <h3>Popover Example</h3> <ul class="list-inline"> <li><a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content"> GeeksforGeeks </a> </li> </ul> </div> <script> $(document).ready(function () { $('[data-toggle="popover"]').popover(); }); </script> </body> </html> Output: Bottom Alignment: In this type of popover alignment, the popover content is displayed at the bottom of the element on which we have applied this attribute. To align the popover to the top, assign an attribute data-placement = "bottom". HTML <!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <!-- Bootstrap CSS and JS --> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <h3>Popover Example</h3> <ul class="list-inline"> <li><a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content"> GeeksforGeeks </a> </li> </ul> </div> <script> $(document).ready(function () { $('[data-toggle="popover"]').popover(); }); </script> </body> </html> Output: Supported Browser: Google ChromeMicrosoft EdgeFirefoxOperaSafari Comment More infoAdvertise with us J Jitender_1998 Follow Improve Article Tags : Web Technologies Bootstrap Similar Reads Bootstrap Forms Alignment Types Bootstrap Forms are pre-styled HTML forms provided by the Bootstrap framework. They streamline the process of creating aesthetically pleasing and responsive forms by offering a range of ready-to-use components, layouts, and styles, ensuring consistency and efficiency in web development. Bootstrap Fo 3 min read Bootstrap DropDowns and Responsive Tabs Introduction and InstallationGrid SystemButtons, Glyphicons, TablesVertical Forms, Horizontal Forms, Inline FormsProgress Bar and Jumbotron Dropdown Menu Using Bootstrap: In bootstrap, dropdowns are created using the class="dropdown". What we will do is create a button and then convert the button in 3 min read Bootstrap Progress Bar and Jumbotron BootStrap articles : Introduction and Installation Grid System Buttons, Glyphicons, Tables Vertical Forms, Horizontal Forms, Inline Forms DropDowns and Responsive Tabs Progress Bar We all have seen a progress bar while executing some process in our computer. A progress bar shows how much of the proc 2 min read Bootstrap Alerts , Wells, Pagination and Pager Introduction and InstallationGrid SystemButtons, Glyphicons, TablesVertical Forms, Horizontal Forms, Inline FormsDropDowns and Responsive TabsProgress Bar and Jumbotron Alerts: We often see certain alerts on some websites before or after completing an action. These alert messages are highlighted tex 4 min read Bootstrap Badges, Labels, Page Headers Introduction and InstallationButtons, Glyphicons, TablesVertical Forms, Horizontal Forms, Inline FormsDropDowns and Responsive TabsProgress Bar and Jumbotron Badges: We all have seen some numerical indicators beside some links on various websites. These are called badges. These badges tell how many 3 min read Bootstrap Tooltips In this article, we would be discussing the tooltip plugin provided by bootstrap. Tooltip is quite useful for showing the description of different elements in the webpage. Tooltip can be invoked on any element in a webpage. Tooltips on bootstrap depends on the 3rd party library Tether for positionin 4 min read Bootstrap Navigation Bar Bootstrap Navigation Bar provides a responsive, customizable, and pre-styled navigation component for web applications. It incorporates features like branding, navigation links, dropdowns, and responsiveness, enabling developers to create effective and visually appealing navigation menus effortlessl 6 min read Bootstrap Carousel Bootstrap Carousel enables slideshow functionality for images or content. Easily customizable with CSS and JavaScript. Supports responsive design and touch gestures, enhancing user experience in web development projects. It can be included in your webpage using "bootstrap.js" or "bootstrap.min.js". 4 min read Bootstrap Cards A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. It replaces the use of panels, wells and thumbnails. All of it can be used in a single container called card . Ba 2 min read Bootstrap | Badges and Breadcrumbs Badges: Badges are numbers associated with the link to indicate the number of items associated with the link. The notification number is seen when logged in to a particular website and tells the numbers of news or notifications to see by clicking it. Example: HTML <!DOCTYPE html> <html> 4 min read Like