static/scss/bootstrap-4.0.0-alpha.6/js/tests/visual/popover.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta charset="utf-8">
   5     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   6     <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
   7     <title>Popover</title>
   8   </head>
   9   <body>
  10     <div class="container">
  11       <h1>Popover <small>Bootstrap Visual Test</small></h1>
  12
  13       <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  14         Popover on top
  15       </button>
  16
  17       <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  18         Popover on right
  19       </button>
  20
  21       <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
  22       sagittis lacus vel augue laoreet rutrum faucibus.">
  23         Popover on bottom
  24       </button>
  25
  26       <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  27         Popover on left
  28       </button>
  29     </div>
  30
  31     <script src="../../../docs/assets/js/vendor/jquery-slim.min.js"></script>
  32     <script src="../../../docs/assets/js/vendor/tether.min.js"></script>
  33     <script src="../../dist/util.js"></script>
  34     <script src="../../dist/tooltip.js"></script>
  35     <script src="../../dist/popover.js"></script>
  36
  37     <script>
  38       $(function () {
  39         $('[data-toggle="popover"]').popover()
  40       })
  41     </script>
  42   </body>
  43 </html>