diff options
| author | Julian Thilo <[email protected]> | 2014-03-28 12:48:19 +0100 |
|---|---|---|
| committer | Julian Thilo <[email protected]> | 2014-03-28 12:48:19 +0100 |
| commit | 90902db50cd9545639bb79ae30d1d81e84c12b6c (patch) | |
| tree | 3a5087119169d8ff89b3e305bd9301cdfef69ef5 /docs/examples | |
| parent | 8d3e9874202347eb9df0e7ca7e9679580c636756 (diff) | |
| download | bootstrap-90902db50cd9545639bb79ae30d1d81e84c12b6c.tar.xz bootstrap-90902db50cd9545639bb79ae30d1d81e84c12b6c.zip | |
Fix tooltip viewport example
- Move example to correct location docs/examples/
- Move custom JS and CSS into stand-alone files
- Update headers and footers
- Copy-editing
Diffstat (limited to 'docs/examples')
| -rw-r--r-- | docs/examples/tooltip-viewport/index.html | 56 | ||||
| -rw-r--r-- | docs/examples/tooltip-viewport/tooltip-viewport.css | 28 | ||||
| -rw-r--r-- | docs/examples/tooltip-viewport/tooltip-viewport.js | 18 |
3 files changed, 102 insertions, 0 deletions
diff --git a/docs/examples/tooltip-viewport/index.html b/docs/examples/tooltip-viewport/index.html new file mode 100644 index 000000000..2f6d0dd38 --- /dev/null +++ b/docs/examples/tooltip-viewport/index.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta name="description" content=""> + <meta name="author" content=""> + <link rel="icon" href="../../assets/ico/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"> + + <!-- Just for debugging purposes. Don't actually copy this line! --> + <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> + + <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> + <!--[if lt IE 9]> + <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> + <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> + <![endif]--> + </head> + + <body> + + <button class="btn pull-right tooltip-bottom", title="This should be shifted to the left">Shift Left</button> + <button class="btn tooltip-bottom", title="This should be shifted to the right">Shift Right</button> + <button class="btn tooltip-right", title="This should be shifted down">Shift Down</button> + + <div class="placeholder">There is a button down there ↓</div> + + <button class="btn tooltip-right", title="This should be shifted up">Shift Up</button> + + <div class="container-viewport"> + <button class="btn tooltip-viewport-bottom", title="This should be shifted to the left">Shift Left</button> + <button class="btn tooltip-viewport-right", title="This should be shifted down">Shift Down</button> + + <button class="btn pull-right tooltip-viewport-bottom", title="This should be shifted to the right">Shift Right</button> + + <button class="btn 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://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> + <script src="../../dist/js/bootstrap.min.js"></script> + <script src="tooltip-viewport.js"></script> + </body> +</html> diff --git a/docs/examples/tooltip-viewport/tooltip-viewport.css b/docs/examples/tooltip-viewport/tooltip-viewport.css new file mode 100644 index 000000000..2d82e9b42 --- /dev/null +++ b/docs/examples/tooltip-viewport/tooltip-viewport.css @@ -0,0 +1,28 @@ +body { + height: 1200px; +} +.tooltip { + min-width: 250px; + max-width: 500px; +} +.tooltip .tooltip-inner { + min-height: 200px; + min-width: 250px; + max-width: 500px; +} +.placeholder { + height: 900px; +} +.container-viewport { + position: absolute; + left: 200px; + top: 600px; + width: 600px; + height: 400px; + background: #c00; +} +.btn-bottom { + position: absolute; + left: 0; + bottom: 0; +} diff --git a/docs/examples/tooltip-viewport/tooltip-viewport.js b/docs/examples/tooltip-viewport/tooltip-viewport.js new file mode 100644 index 000000000..e87f4eec7 --- /dev/null +++ b/docs/examples/tooltip-viewport/tooltip-viewport.js @@ -0,0 +1,18 @@ +$(document).ready(function () { + $('.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} + }) +}) |