| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> |
| <meta name="description" content=""> |
| <meta name="author" content=""> |
| <link rel="shortcut icon" href="../../../../favicon.ico"> |
| |
| <title>Tooltip Viewport Example for Bootstrap</title> |
| |
| <!-- Bootstrap core CSS --> |
| <link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet"> |
| |
| <!-- Custom styles for this template --> |
| <link href="tooltip-viewport.css" rel="stylesheet"> |
| </head> |
| |
| <body> |
| |
| <button type="button" class="btn btn-secondary float-right tooltip-bottom" title="This should be shifted to the left">Shift Left</button> |
| <button type="button" class="btn btn-secondary tooltip-bottom" title="This should be shifted to the right">Shift Right</button> |
| <button type="button" class="btn btn-secondary tooltip-right" title="This should be shifted down">Shift Down</button> |
| |
| <button type="button" class="btn btn-secondary tooltip-right btn-bottom" title="This should be shifted up">Shift Up</button> |
| |
| <div class="container-viewport"> |
| <button type="button" class="btn btn-secondary tooltip-viewport-bottom" title="This should be shifted to the left">Shift Left</button> |
| <button type="button" class="btn btn-secondary tooltip-viewport-right" title="This should be shifted down">Shift Down</button> |
| |
| <button type="button" class="btn btn-secondary float-right tooltip-viewport-bottom" title="This should be shifted to the right">Shift Right</button> |
| |
| <button type="button" class="btn btn-secondary tooltip-viewport-right btn-bottom" title="This should be shifted up">Shift Up</button> |
| </div> |
| |
| <!-- Bootstrap core JavaScript |
| ================================================== --> |
| <!-- Placed at the end of the document so the pages load faster --> |
| <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> |
| <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script> |
| <script src="../../../../assets/js/vendor/popper.min.js"></script> |
| <script src="../../../../dist/js/bootstrap.min.js"></script> |
| <script src="tooltip-viewport.js"></script> |
| </body> |
| </html> |
