static/scss/bootstrap-4.0.0-alpha.6/js/tests/visual/tooltip.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>Tooltip</title>
   8   </head>
   9   <body>
  10     <div class="container">
  11       <h1>Tooltip <small>Bootstrap Visual Test</small></h1>
  12
  13       <p class="text-muted">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.</p>
  14
  15       <hr>
  16
  17       <p>
  18         <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  19           Tooltip on top
  20         </button>
  21         <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  22           Tooltip on right
  23         </button>
  24         <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  25           Tooltip on bottom
  26         </button>
  27         <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  28           Tooltip on left
  29         </button>
  30         <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  31           Tooltip with HTML
  32         </button>
  33       </p>
  34     </div>
  35
  36     <script src="../../../docs/assets/js/vendor/jquery-slim.min.js"></script>
  37     <script src="../../../docs/assets/js/vendor/tether.min.js"></script>
  38     <script src="../../dist/util.js"></script>
  39     <script src="../../dist/tooltip.js"></script>
  40
  41     <script>
  42       $(function () {
  43         $('[data-toggle="tooltip"]').tooltip()
  44         testTooltipTransitionError()
  45       })
  46
  47       // Should throw an error because tooltip is in transition
  48       function testTooltipTransitionError() {
  49         var err = false
  50         $('#btnOne').on('shown.bs.tooltip', function () {
  51           $('#btnOne').tooltip('hide').off('shown.bs.tooltip')
  52           if (!err) {
  53             alert('No error thrown for : testTooltipTransitionError')
  54           }
  55         })
  56         try {
  57           $('#btnOne').tooltip('show').tooltip('hide')
  58         }
  59         catch (e) {
  60           err = true
  61           console.error(e.message)
  62         }
  63       }
  64     </script>
  65   </body>
  66 </html>