|
7 | 7 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
8 | 8 | <title>CSS UI - Tooltip</title> |
9 | 9 |
|
10 | | - <!-- css styles --> |
| 10 | + <!-- css --> |
11 | 11 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css"> |
12 | 12 | <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600&subset=latin-ext"> |
13 | 13 | <link rel="stylesheet" href="https://css-ui.github.io/css/cssui.min.css"> |
| 14 | + |
| 15 | + <!-- css tooltip --> |
14 | 16 | <link rel="stylesheet" href="css/style.tooltip.css"> |
15 | 17 | <link rel="stylesheet" href="css/style.tooltip.theme.css"> |
16 | 18 |
|
17 | | - <!-- style only for this page --> |
| 19 | + <!-- css only for this page --> |
18 | 20 | <style> |
19 | 21 | body { |
20 | 22 | font-family: 'Open Sans', sans-serif; |
21 | | - padding: 50px 0 0 65px |
22 | | - } |
23 | | - |
24 | | - .container { |
25 | | - max-width: 960px; |
26 | | - } |
27 | | - |
28 | | - @media only screen and (min-width: 768px) { |
29 | | - body { |
30 | | - padding-left: 0; |
31 | | - } |
| 23 | + margin: 50px; |
32 | 24 | } |
33 | 25 | </style> |
34 | 26 | </head> |
35 | 27 | <body> |
36 | | - <div class="container"> |
| 28 | + <!-- demonstration page --> |
| 29 | + <div class="container" style="max-width: 960px;"> |
37 | 30 | <h2>CSS UI - Tooltip</h2> |
38 | 31 | <div class="row"> |
39 | 32 | <div class="two columns"> |
40 | | - <p style="color: #1ba2eb; padding-top: 25px;"><b>Primary</b></p> |
| 33 | + <p style="color: #1ba2eb;"><b>Primary</b></p> |
41 | 34 | <p><span class="tooltip">Top <span class="primary top">Top</span></span></p> |
42 | 35 | <p><span class="tooltip">Bottom <span class="primary bottom">Bottom</span></span></p> |
43 | 36 | <p><span class="tooltip">Left <span class="primary left">Left</span></span></p> |
44 | 37 | <p><span class="tooltip">Right <span class="primary right">Right</span></span></p> |
45 | 38 | </div> |
46 | 39 | <div class="two columns"> |
47 | | - <p style="color: #545454; padding-top: 25px;"><b>Common</b></p> |
| 40 | + <p style="color: #545454;"><b>Common</b></p> |
48 | 41 | <p><span class="tooltip">Top <span class="common top">Top</span></span></p> |
49 | 42 | <p><span class="tooltip">Bottom <span class="common bottom">Bottom</span></span></p> |
50 | 43 | <p><span class="tooltip">Left <span class="common left">Left</span></span></p> |
51 | 44 | <p><span class="tooltip">Right <span class="common right">Right</span></span></p> |
52 | 45 | </div> |
53 | 46 | <div class="two columns"> |
54 | | - <p style="color: #52d064; padding-top: 25px;"><b>Success</b></p> |
| 47 | + <p style="color: #52d064;"><b>Success</b></p> |
55 | 48 | <p><span class="tooltip">Top <span class="success top">Top</span></span></p> |
56 | 49 | <p><span class="tooltip">Bottom <span class="success bottom">Bottom</span></span></p> |
57 | 50 | <p><span class="tooltip">Left <span class="success left">Left</span></span></p> |
58 | 51 | <p><span class="tooltip">Right <span class="success right">Right</span></span></p> |
59 | 52 | </div> |
60 | 53 | <div class="two columns"> |
61 | | - <p style="color: #ffd965; padding-top: 25px;"><b>Warning</b></p> |
| 54 | + <p style="color: #ffd965;"><b>Warning</b></p> |
62 | 55 | <p><span class="tooltip">Top <span class="warning top">Top</span></span></p> |
63 | 56 | <p><span class="tooltip">Bottom <span class="warning bottom">Bottom</span></span></p> |
64 | 57 | <p><span class="tooltip">Left <span class="warning left">Left</span></span></p> |
65 | 58 | <p><span class="tooltip">Right <span class="warning right">Right</span></span></p> |
66 | 59 | </div> |
67 | 60 | <div class="two columns"> |
68 | | - <p style="color: #ff3e59; padding-top: 25px;"><b>Danger</b></p> |
| 61 | + <p style="color: #ff3e59;"><b>Danger</b></p> |
69 | 62 | <p><span class="tooltip">Top <span class="danger top">Top</span></span></p> |
70 | 63 | <p><span class="tooltip">Bottom <span class="danger bottom">Bottom</span></span></p> |
71 | 64 | <p><span class="tooltip">Left <span class="danger left">Left</span></span></p> |
|
0 commit comments