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
+    }
+  })
+})