1 files changed, 103 insertions, 0 deletions
diff --git a/examples/tooltips/viewport.html b/examples/tooltips/viewport.html
new file mode 100644
index 000000000..6efcd0495
--- /dev/null
+++ b/examples/tooltips/viewport.html
@@ -0,0 +1,103 @@
+<!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>
+    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;
+    }
+    </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>
+
+    <div class="container-viewport">
+      <button class="btn tooltip-viewport-bottom", title="This should be shifted 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 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://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="../../js/tooltip.js"></script>
+
+    <script>
+    $(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}
+      });
+    });
+    </script>
+  </body>
+</html>