diff options
| author | Mark Otto <[email protected]> | 2017-05-26 21:22:08 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2017-05-26 21:22:08 -0700 |
| commit | 04724939a39d68b495da638e58eb794dafe8ab93 (patch) | |
| tree | 7648460f56c35778514e388fc2933b8d55c6cce8 /js/tests/visual/tooltip.html | |
| parent | e0e1e849e6cda0d4af88a46f7e7e5a91f8b8498d (diff) | |
| parent | f2829dd6ea10d1af7e451397f7228087cff95b8a (diff) | |
| download | bootstrap-04724939a39d68b495da638e58eb794dafe8ab93.tar.xz bootstrap-04724939a39d68b495da638e58eb794dafe8ab93.zip | |
Merge branch 'v4-dev' into form-tweaks
Diffstat (limited to 'js/tests/visual/tooltip.html')
| -rw-r--r-- | js/tests/visual/tooltip.html | 26 |
1 files changed, 25 insertions, 1 deletions
diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html index f447a533b..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,17 +46,25 @@ <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() + $('#target').tooltip({ + placement : 'top', + trigger : 'manual' + }).tooltip('show') }) </script> </body> |