UNPKG

4.6 kBHTMLView Raw
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>