Popover Plugin in Bootstrap

The Popover plugin works same as like tooltips. It opens a popup box when the use clicks on 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


  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><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></li>  
  16. <li><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></li>  
  17. <li><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></li>  
  18. <li><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></li>  
  19. </ul>  
  20. </div>  
  21. <script>  
  22. $(document).ready(function () {  
  23. $('[data-toggle="articletitle"]').popover();  
  24. });  
  25. </script>  
  26. </body>  
  27. </html>  


This blog shows how to use Bootstrap Popover plugin in HTML 5. If you have any question or comment, drop me a comment in C# Corner comments section.