diff options
author | Mark Otto <markd.otto@gmail.com> | 2018-04-09 19:00:23 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-04-09 19:00:23 +0300 |
commit | 8f7bd419935adfcd53c471a0202083464800619e (patch) | |
tree | d0e6ab018a0f41b59a1206cf72ffc79a474e69b9 /docs/4.1/examples/tooltip-viewport | |
parent | 91730a644f107ca80a747a6f7f0c173eca5708fa (diff) |
Ship v4.1.0 (#26218)v4.1.0
* update docs path from docs/4.0/ to docs/4.1/
* bump version to 4.1.0
* Update redirects to work for 4.1 docs move
* Update docs version switcher to include latest and link to 4.0 docs
* re-run dist
* Update package-lock.json
* Update docs-navbar.html
Diffstat (limited to 'docs/4.1/examples/tooltip-viewport')
-rw-r--r-- | docs/4.1/examples/tooltip-viewport/index.html | 45 | ||||
-rw-r--r-- | docs/4.1/examples/tooltip-viewport/tooltip-viewport.css | 26 | ||||
-rw-r--r-- | docs/4.1/examples/tooltip-viewport/tooltip-viewport.js | 32 |
3 files changed, 103 insertions, 0 deletions
diff --git a/docs/4.1/examples/tooltip-viewport/index.html b/docs/4.1/examples/tooltip-viewport/index.html new file mode 100644 index 0000000000..dae9001595 --- /dev/null +++ b/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/docs/4.1/examples/tooltip-viewport/tooltip-viewport.css b/docs/4.1/examples/tooltip-viewport/tooltip-viewport.css new file mode 100644 index 0000000000..26aa2e3482 --- /dev/null +++ b/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/docs/4.1/examples/tooltip-viewport/tooltip-viewport.js b/docs/4.1/examples/tooltip-viewport/tooltip-viewport.js new file mode 100644 index 0000000000..dc75e18c63 --- /dev/null +++ b/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 + } + }) +}) |