1 | <!DOCTYPE html>
|
2 | <html lang="en">
|
3 | <head>
|
4 | <meta charset="UTF-8">
|
5 | <title>Demo: Tooltip</title>
|
6 | <meta name="viewport" content="width=device-width, initial-scale=1">
|
7 |
|
8 | <link rel="stylesheet" href="../build/marble.css">
|
9 | <link rel="stylesheet" href="../build/templates/root.css">
|
10 | <link rel="stylesheet" href="../build/templates/docs.css">
|
11 | <link rel="stylesheet" href="../build/fonts/galano/galano.css">
|
12 |
|
13 | <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:700,400,300">
|
14 |
|
15 | <style>
|
16 | .tooltip.tooltip-dark,
|
17 | .tooltip.tooltip-light {
|
18 | position: relative !important;
|
19 | margin-bottom: 24px;
|
20 | }
|
21 |
|
22 | form label {
|
23 | left: 0;
|
24 | top: 0;
|
25 | margin-right: 24px;
|
26 | cursor: pointer;
|
27 | }
|
28 |
|
29 | form label input[type="radio"] {
|
30 | margin: 0 12px 0 0;
|
31 | }
|
32 |
|
33 | </style>
|
34 | </head>
|
35 | <body>
|
36 |
|
37 | <div class="container-hybrid-half">
|
38 |
|
39 | <div class="content-header">
|
40 | <h1 class="header-title">Tooltip</h1>
|
41 | </div>
|
42 |
|
43 | <div class="content-body">
|
44 | <section>
|
45 | <h2 class="content-body-subtitle">Choose your theme</h2>
|
46 | <form name="myForm">
|
47 | <label><input type="radio" name="myRadios" value="dark" checked onclick="changeTheme(this)" />dark</label>
|
48 | <label><input type="radio" name="myRadios" value="light" onclick="changeTheme(this)" />light</label>
|
49 | </form>
|
50 | </section>
|
51 |
|
52 | <section>
|
53 | <h2 class="content-body-title">Regular</h2>
|
54 | <div class="tooltip tooltip-dark" role="tooltip">
|
55 | <div class="tooltip-arrow"></div>
|
56 | <div class="tooltip-inner">
|
57 |
|
58 | <div class="tooltip-title">
|
59 | Storage
|
60 | </div>
|
61 |
|
62 | <div class="tooltip-description">
|
63 | Total storage for the realtime database.<br/>
|
64 | This does not include hosting or other features.
|
65 | </div>
|
66 |
|
67 | </div>
|
68 | </div>
|
69 | </section>
|
70 |
|
71 | <section>
|
72 | <h2 class="content-body-title">Larger Width Size</h2>
|
73 | <div class="tooltip tooltip-dark" role="tooltip">
|
74 | <div class="tooltip-arrow"></div>
|
75 | <div class="tooltip-inner">
|
76 | <div class="tooltip-title">
|
77 | Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
|
78 | </div>
|
79 |
|
80 | <div class="tooltip-description">
|
81 | Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
|
82 | </div>
|
83 |
|
84 | </div>
|
85 | </div>
|
86 | </section>
|
87 |
|
88 | <section>
|
89 | <h2 class="content-body-title">Only Title</h2>
|
90 | <div class="tooltip tooltip-dark" role="tooltip">
|
91 | <div class="tooltip-arrow"></div>
|
92 | <div class="tooltip-inner">
|
93 | <div class="tooltip-title">
|
94 | Only Title
|
95 | </div>
|
96 | </div>
|
97 | </div>
|
98 | </section>
|
99 |
|
100 | <section>
|
101 | <h2 class="content-body-title">Only Description</h2>
|
102 | <div class="tooltip tooltip-dark" role="tooltip">
|
103 | <div class="tooltip-arrow"></div>
|
104 | <div class="tooltip-inner">
|
105 | <div class="tooltip-description">
|
106 | Only Description
|
107 | </div>
|
108 | </div>
|
109 | </div>
|
110 | </section>
|
111 |
|
112 | <section>
|
113 | <h2 class="content-body-title">With Links</h2>
|
114 | <div class="tooltip tooltip-dark" role="tooltip">
|
115 | <div class="tooltip-arrow"></div>
|
116 | <div class="tooltip-inner">
|
117 | <div class="tooltip-description">
|
118 | To make a project accessible via one or more non-WeDeploy domain names, you must update your domain's DNS records. <a href="javascript:;">Read the docs</a> for more information.
|
119 | </div>
|
120 | </div>
|
121 | </div>
|
122 | </section>
|
123 | </div>
|
124 | </div>
|
125 |
|
126 |
|
127 | <script type="text/javascript">
|
128 |
|
129 | var tooltips = document.querySelectorAll('.tooltip');
|
130 |
|
131 | setTimeout(() => {
|
132 | tooltips.forEach((tooltip) => {
|
133 | tooltip.classList.add('showing');
|
134 | });
|
135 | }, 50);
|
136 |
|
137 | function changeTheme(item) {
|
138 | if(item.value === "light") {
|
139 | tooltips.forEach((tooltip) => {
|
140 | tooltip.classList.add('tooltip-light');
|
141 | tooltip.classList.remove('tooltip-dark');
|
142 | });
|
143 | } else {
|
144 | tooltips.forEach((tooltip) => {
|
145 | tooltip.classList.add('tooltip-dark');
|
146 | tooltip.classList.remove('tooltip-light');
|
147 | });
|
148 | }
|
149 | }
|
150 |
|
151 | </script>
|
152 | </body>
|
153 | </html>
|