diff options
| author | Mark Otto <[email protected]> | 2014-01-16 20:01:28 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2014-01-16 20:01:28 -0800 |
| commit | 03f4534307988e0c46bd9ee5896977d0adcb7d41 (patch) | |
| tree | eea4b3644fdd12849cee60f77fd7144830d54547 /examples | |
| parent | 8eef0a47eec5db062609eeef72f46857bba099e0 (diff) | |
| parent | edb221a20ceabebd427e27d0432e94a227717217 (diff) | |
| download | bootstrap-03f4534307988e0c46bd9ee5896977d0adcb7d41.tar.xz bootstrap-03f4534307988e0c46bd9ee5896977d0adcb7d41.zip | |
Merge branch 'bo-tooltip-viewport' of https://github.com/benogle/bootstrap into benogle-bo-tooltip-viewport
Conflicts:
docs/javascript.html
Diffstat (limited to 'examples')
| -rw-r--r-- | examples/tooltips/viewport.html | 71 |
1 files changed, 71 insertions, 0 deletions
diff --git a/examples/tooltips/viewport.html b/examples/tooltips/viewport.html new file mode 100644 index 000000000..6805056f2 --- /dev/null +++ b/examples/tooltips/viewport.html @@ -0,0 +1,71 @@ +<!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.0"> + <meta name="description" content=""> + <meta name="author" content=""> + <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png"> + + <title>Tooltip Viewport Example for Bootstrap</title> + + <!-- Bootstrap core CSS --> + <link href="../../dist/css/bootstrap.css" rel="stylesheet"> + + <!-- Just for debugging purposes. Don't actually copy this line! --> + <!--[if lt IE 9]><script src="../../docs-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.3.0/respond.min.js"></script> + <![endif]--> + + <style> + .tooltip { + min-width: 250px; + max-width: 500px; + } + .tooltip .tooltip-inner { + min-height: 200px; + min-width: 250px; + max-width: 500px; + } + + .placeholder { + height: 900px; + } + </style> + </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> + + <!-- Bootstrap core JavaScript + ================================================== --> + <!-- Placed at the end of the document so the pages load faster --> + <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> + <script src="../../js/tooltip.js"></script> + + <script> + $(function(){ + $('.tooltip-right').tooltip({ + placement: 'right', + viewportPadding: 2 + }); + $('.tooltip-bottom').tooltip({ + placement: 'bottom', + viewportPadding: 2 + }); + }); + </script> + </body> +</html> |