+++ /dev/null
-<!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="../../dist/js/bootstrap.bundle.min.js"></script>
- <script src="tooltip-viewport.js"></script>
- </body>
-</html>
+++ /dev/null
-$(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
- }
- })
-})