All for Joomla All for Webmasters

Bootstrap Popover

The bootstrap popover plugin is very similar to tooltips. It appears as a pop-up box when the user clicks on an element. The difference is that the popover can contain much more content.

To create a popover, add the data-toggle=”popover” attribute to an element and the title attribute to specify the header text of the popover, the data-content attribute to specify the text that should be displayed inside the popover’s body.

See this example:

  1.  <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Example</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  8.   <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  9.   <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  10. </head>
  11. <body>
  12. <div class=“container”>
  13.   <h3>Popover Example</h3>
  14.   <a href=“#” data-toggle=“popover” title=“Popover Header” data-content=“Some content inside the popover”>Toggle popover</a>
  15. </div>
  16. <script>
  17. $(document).ready(function(){
  18.     $(‘[data-toggle=“popover”]’).popover();
  19. });
  20. </script>
  21. </body>
  22. </html>

Bootstrap Positioning Popovers

By default the popover is appeared on the ride side of the element but you can set a position of the popover where ever you want such as top, bottom, side and left.

Use the data-placement attribute to set the position of the popover on top, bottom, left or the right side of the element.

See this example:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Example</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  8.   <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  9.   <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  10. </head>
  11. <body>
  12. <div class=“container”>
  13.   <h3>Popover Example</h3>
  14.   <ul class=“list-inline”>
  15.     <li><a href=“#” title=“Header” data-toggle=“popover” data-placement=“top” data-content=“Content”>Top</a></li>
  16.     <li><a href=“#” title=“Header” data-toggle=“popover” data-placement=“bottom” data-content=“Content”>Bottom</a></li>
  17.     <li><a href=“#” title=“Header” data-toggle=“popover” data-placement=“left” data-content=“Content”>Left</a></li>
  18.     <li><a href=“#” title=“Header” data-toggle=“popover” data-placement=“right” data-content=“Content”>Right</a></li>
  19.   </ul>
  20. </div>
  21. <script>
  22. $(document).ready(function(){
  23.     $(‘[data-toggle=“popover”]’).popover();
  24. });
  25. </script>
  26. </body>
  27. </html>

Bootstrap Closing Popovers

By default, the popover is closed when you click on the element again. But you can use the attribute data-trigger=”focus” to close the popover when clicking outside the element.

See this example:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Example</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  8.   <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  9.   <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  10. </head>
  11. <body>
  12. <div class=“container”>
  13.   <h3>Popover Example</h3>
  14.     <a href=“#” title=“Dismissible popover” data-toggle=“popover” data-trigger=“focus” data-content=“Click anywhere in the document to close this popover”>Click me</a>
  15. </div>
  16. <script>
  17. $(document).ready(function(){
  18.     $(‘[data-toggle=“popover”]’).popover();
  19. });
  20. </script>
  21. </body>
  22. </html>
PinIt
submit to reddit

Leave a Reply

Top