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.