diff options
| author | Mark Otto <[email protected]> | 2017-05-30 08:46:33 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2017-05-30 08:46:33 -0700 |
| commit | d4eb0d4e739477fc51421eed29906addfd998a04 (patch) | |
| tree | 5ffe09c63ac4e522890fc7b2b87c0a47b0f1a971 /js/tests/visual/tooltip.html | |
| parent | 0c12ccbeb6fdf0dd3818f97260aa43c79108d377 (diff) | |
| parent | f95cbc5950bf31995f33023014c47a61665ffacc (diff) | |
| download | bootstrap-d4eb0d4e739477fc51421eed29906addfd998a04.tar.xz bootstrap-d4eb0d4e739477fc51421eed29906addfd998a04.zip | |
Merge branch 'v4-docs-streamlined' of https://github.com/twbs/bootstrap into v4-docs-streamlined
Diffstat (limited to 'js/tests/visual/tooltip.html')
| -rw-r--r-- | js/tests/visual/tooltip.html | 45 |
1 files changed, 25 insertions, 20 deletions
diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html index ada6d8b79..172cb29ad 100644 --- a/js/tests/visual/tooltip.html +++ b/js/tests/visual/tooltip.html @@ -5,6 +5,19 @@ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css"> <title>Tooltip</title> + <style> + #target { + border: 1px solid; + width: 100px; + height: 50px; + border: 1px solid; + margin-left: 50px; + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg); + transform: rotate(270deg); + margin-top: 100px; + } + </style> </head> <body> <div class="container"> @@ -15,6 +28,9 @@ <hr> <p> + <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="auto" title="Tooltip on auto"> + Tooltip on auto + </button> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top"> Tooltip on top </button> @@ -30,37 +46,26 @@ <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>"> Tooltip with HTML </button> + <svg width="30" height="20"> + <circle cx="15" cy="10" r="10" fill="#62448F" data-toggle="tooltip" data-placement="top" title="Tooltip on SVG" /> + </svg> </p> + <div id="target" title="Test tooltip on transformed element"></div> </div> <script src="../../../docs/assets/js/vendor/jquery-slim.min.js"></script> - <script src="../../../docs/assets/js/vendor/tether.min.js"></script> + <script src="../../../docs/assets/js/vendor/popper.min.js"></script> <script src="../../dist/util.js"></script> <script src="../../dist/tooltip.js"></script> <script> $(function () { $('[data-toggle="tooltip"]').tooltip() - testTooltipTransitionError() + $('#target').tooltip({ + placement : 'top', + trigger : 'manual' + }).tooltip('show') }) - - // Should throw an error because tooltip is in transition - function testTooltipTransitionError() { - var err = false - $('#btnOne').on('shown.bs.tooltip', function () { - $('#btnOne').tooltip('hide').off('shown.bs.tooltip') - if (!err) { - alert('No error thrown for : testTooltipTransitionError') - } - }) - try { - $('#btnOne').tooltip('show').tooltip('hide') - } - catch (e) { - err = true - console.error(e.message) - } - } </script> </body> </html> |