Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
index.html 2.61 KiB
1 
<!DOCTYPE html>
2 
<html lang="en">
3 
  <head>
4 
    <meta charset="utf-8">
5 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 
    <meta name="viewport" content="width=device-width, initial-scale=1">
7 
    <meta name="description" content="">
8 
    <meta name="author" content="">
9 
    <link rel="icon" href="../../assets/ico/favicon.ico">
10
11 
    <title>Tooltip Viewport Example for Bootstrap</title>
12
13 
    <!-- Bootstrap core CSS -->
14 
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
15
16 
    <!-- Custom styles for this template -->
17 
    <link href="tooltip-viewport.css" rel="stylesheet">
18
19 
    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
20 
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
21 
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script>
22
23 
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
24 
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
25
26 
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
27 
    <!--[if lt IE 9]>
28 
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
29 
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
30 
    <![endif]-->
31 
  </head>
32
33 
  <body>
34
35 
    <button class="btn pull-right tooltip-bottom" title="This should be shifted to the left">Shift Left</button>
36 
    <button class="btn tooltip-bottom" title="This should be shifted to the right">Shift Right</button>
37 
    <button class="btn tooltip-right" title="This should be shifted down">Shift Down</button>
38
39 
    <div class="placeholder">There is a button down there ↓</div>
40
41 
    <button class="btn tooltip-right" title="This should be shifted up">Shift Up</button>
42
43 
    <div class="container-viewport">
44 
      <button class="btn tooltip-viewport-bottom" title="This should be shifted to the left">Shift Left</button>
45 
      <button class="btn tooltip-viewport-right" title="This should be shifted down">Shift Down</button>
46
47 
      <button class="btn pull-right tooltip-viewport-bottom" title="This should be shifted to the right">Shift Right</button>
48
49 
      <button class="btn tooltip-viewport-right btn-bottom" title="This should be shifted up">Shift Up</button>
50 
    </div>
51
52
53 
    <!-- Bootstrap core JavaScript
54 
    ================================================== -->
55 
    <!-- Placed at the end of the document so the pages load faster -->
56 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
57 
    <script src="../../dist/js/bootstrap.min.js"></script>
58 
    <script src="tooltip-viewport.js"></script>
59 
  </body>
60 
</html>
61