Post
Ask Question

Popover Plugin in Bootstrap

Popover Plugin in Bootstrap 

 
The Popover plugin works the same as tooltips. It opens a popup box when the user clicks on an element. The only difference is that popover can contain more content then tooltip.
 
There are following popover methods:
  •     popover(options) – Activates the popover with an option. See options above for valid values
  •     popover("show") - Shows the popover
  •     popover("hide") – Hides the popover
  •     popover("toggle") - Toggles the popover
  •     popover("destroy") - Hides and destroys the popover
Example:
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <title>Popover Plugin Sample</title>  
  5.         <meta charset="utf-8">  
  6.             <meta name="viewport" content="width=device-width, initial-scale=1">  
  7.                 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  8.                     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  
  9.                     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  10.                 </head>  
  11.                 <body>  
  12.                     <div class="container">  
  13.                         <h3>Latest Articles</h3>  
  14.                         <ul>  
  15.                             <li>  
  16.                                 <a href="#" data-toggle="articletitle" data-trigger="focus" data-placement="right" title="C# Corner" data-content="In this article, you will learn about Directives in AngularJS.">AngularJS Directives</a>  
  17.                             </li>  
  18.                             <li>  
  19.                                 <a href="#" data-toggle="articletitle" data-trigger="focus" data-placement="right" title="C# Corner" data-content="In this article, we will learn about AngularJS Filters.">AngularJS Filters</a>  
  20.                             </li>  
  21.                             <li>  
  22.                                 <a href="#" data-toggle="articletitle" data-trigger="focus" data-placement="right" title="C# Corner" data-content="In this article you will learn CRUD operation in MVC with AngularJS using Web API with SQL Server database.">AngularJS CRUD Operations With Web API Using SQL Database</a>  
  23.                             </li>  
  24.                             <li>  
  25.                                 <a href="#" data-toggle="articletitle" data-trigger="focus" data-placement="right" title="C# Corner" data-content="In this article, we will learn how to use Routing in AngularJS.">AngularJS Routing</a>  
  26.                             </li>  
  27.                         </ul>  
  28.                     </div>  
  29.                     <script>    
  30. $(document).ready(function () {    
  31. $('[data-toggle="articletitle"]').popover();    
  32. });    
  33. </script>  
  34.                 </body>  
  35.             </html>  
Output:
a
 
s
 
Conclusion
 
This blog shows how to use the Bootstrap Popover plugin in HTML 5. If you have any questions or comments, drop me a comment in the C# Corner comments section.