diff options
Diffstat (limited to 'vendor/twbs/bootstrap/site/docs/4.1/examples/tooltip-viewport')
3 files changed, 103 insertions, 0 deletions
diff --git a/vendor/twbs/bootstrap/site/docs/4.1/examples/tooltip-viewport/index.html b/vendor/twbs/bootstrap/site/docs/4.1/examples/tooltip-viewport/index.html new file mode 100644 index 000000000..fabe12ddf --- /dev/null +++ b/vendor/twbs/bootstrap/site/docs/4.1/examples/tooltip-viewport/index.html @@ -0,0 +1,45 @@ +<!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> diff --git a/vendor/twbs/bootstrap/site/docs/4.1/examples/tooltip-viewport/tooltip-viewport.css b/vendor/twbs/bootstrap/site/docs/4.1/examples/tooltip-viewport/tooltip-viewport.css new file mode 100644 index 000000000..26aa2e348 --- /dev/null +++ b/vendor/twbs/bootstrap/site/docs/4.1/examples/tooltip-viewport/tooltip-viewport.css @@ -0,0 +1,26 @@ +body { + height: 1200px; +} +.tooltip { + min-width: 250px; + max-width: 500px; +} +.tooltip .tooltip-inner { + min-width: 250px; + max-width: 500px; + min-height: 100px; + text-align: left; +} +.container-viewport { + position: absolute; + top: 100px; + right: 250px; + left: 250px; + height: 300px; + background-color: #eee; +} +.btn-bottom { + position: absolute; + bottom: 0; + left: 0; +} diff --git a/vendor/twbs/bootstrap/site/docs/4.1/examples/tooltip-viewport/tooltip-viewport.js b/vendor/twbs/bootstrap/site/docs/4.1/examples/tooltip-viewport/tooltip-viewport.js new file mode 100644 index 000000000..dc75e18c6 --- /dev/null +++ b/vendor/twbs/bootstrap/site/docs/4.1/examples/tooltip-viewport/tooltip-viewport.js @@ -0,0 +1,32 @@ +$(function () { + 'use strict' + + $('.tooltip-right').tooltip({ + placement: 'right', + viewport: { + selector: 'body', + padding: 2 + } + }) + $('.tooltip-bottom').tooltip({ + placement: 'bottom', + viewport: { + selector: 'body', + padding: 2 + } + }) + $('.tooltip-viewport-right').tooltip({ + placement: 'right', + viewport: { + selector: '.container-viewport', + padding: 2 + } + }) + $('.tooltip-viewport-bottom').tooltip({ + placement: 'bottom', + viewport: { + selector: '.container-viewport', + padding: 2 + } + }) +}) |