Tooltip by Tsiangana

#e8e8e8

1/* This is an example, feel free to delete this code */
2.tooltip-container {
3  background: rgb(3, 169, 244);
4  background: linear-gradient(
5    138deg,
6    rgba(3, 169, 244, 1) 15%,
7    rgba(63, 180, 233, 1) 65%
8  );
9  position: relative;
10  cursor: pointer;
11  font-size: 17px;
12  padding: 0.7em 0.7em;
13  border-radius: 50px;
14  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
15}
16.tooltip-container:hover {
17  background: #fff;
18  transition: all 0.6s;
19}
20.tooltip-container .text {
21  display: flex;
22  align-items: center;
23  justify-content: center;
24  fill: #fff;
25  transition: all 0.2s;
26}
27.tooltip-container:hover .text {
28  fill: rgb(3, 169, 244);
29  transition: all 0.6s;
30}
31
32/* Inicio do tooltip twitter */
33.tooltip1 {
34  position: absolute;
35  top: 100%;
36  left: 50%;
37  transform: translateX(-50%);
38  opacity: 0;
39  visibility: hidden;
40  background: #fff;
41  fill: #03a9f4;
42  padding: 10px;
43  border-radius: 50px;
44  transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
45  z-index: 1;
46  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
47}
48
49.tooltip-container:hover .tooltip1 {
50  top: 150%;
51  opacity: 1;
52  visibility: visible;
53  background: #fff;
54  border-radius: 50px;
55  transform: translate(-50%, -5px);
56  display: flex;
57  align-items: center;
58  justify-content: center;
59}
60.tooltip-container:hover .tooltip1:hover {
61  background: #03a9f4;
62  fill: #fff;
63}
64/* Fim do tooltip twitter */
65
66/* Inicio do tooltip facebook */
67.tooltip2 {
68  position: absolute;
69  top: 100%;
70  left: 50%;
71  transform: translateX(-50%);
72  opacity: 0;
73  visibility: hidden;
74  background: #fff;
75  fill: #0462df;
76  padding: 10px;
77  border-radius: 50px;
78  transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
79  z-index: 1;
80  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
81}
82
83.tooltip-container:hover .tooltip2 {
84  top: -120%;
85  opacity: 1;
86  visibility: visible;
87  background: #fff;
88  transform: translate(-50%, -5px);
89  border-radius: 50px;
90  display: flex;
91  align-items: center;
92  justify-content: center;
93}
94
95.tooltip-container:hover .tooltip2:hover {
96  background: #0462df;
97  fill: #fff;
98}
99/* Fim do tooltip facebook */
100
101/* Inicio do tooltip whatsApp */
102.tooltip3 {
103  position: absolute;
104  top: 100%;
105  left: 60%;
106  transform: translateX(80%);
107  opacity: 0;
108  visibility: hidden;
109  background: #fff;
110  fill: #1db954;
111  padding: 10px;
112  border-radius: 50px;
113  transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
114  z-index: 1;
115  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
116}
117
118.tooltip-container:hover .tooltip3 {
119  top: 10%;
120  opacity: 1;
121  visibility: visible;
122  background: #fff;
123  transform: translate(85%, -5px);
124  border-radius: 50px;
125  display: flex;
126  align-items: center;
127  justify-content: center;
128}
129.tooltip-container:hover .tooltip3:hover {
130  background: #1db954;
131  fill: #fff;
132}
133/* Fim do tooltip whatsApp */
134
135/* Inicio do tooltip Discord */
136.tooltip4 {
137  position: absolute;
138  top: 100%;
139  left: -190%;
140  transform: translateX(70%);
141  opacity: 0;
142  visibility: hidden;
143  background: #fff;
144  fill: #8c9eff;
145  padding: 10px;
146  border-radius: 50px;
147  transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
148  z-index: 1;
149  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
150}
151
152.tooltip-container:hover .tooltip4 {
153  top: 10%;
154  opacity: 1;
155  visibility: visible;
156  background: #fff;
157  transform: translate(70%, -5px);
158  border-radius: 50px;
159  display: flex;
160  align-items: center;
161  justify-content: center;
162}
163.tooltip-container:hover .tooltip4:hover {
164  background: #8c9eff;
165  fill: #fff;
166}
167/* Fim do tooltip Discord */
168
169/* Inicio do tooltip pinterest */
170.tooltip5 {
171  position: absolute;
172  top: 100%;
173  left: -145%;
174  transform: translateX(70%);
175  opacity: 0;
176  visibility: hidden;
177  background: #fff;
178  fill: #bd081c;
179  padding: 10px;
180  border-radius: 50px;
181  transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
182  z-index: 1;
183  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
184}
185
186.tooltip-container:hover .tooltip5 {
187  top: -78%;
188  opacity: 1;
189  visibility: visible;
190  background: #fff;
191  transform: translate(70%, -5px);
192  border-radius: 50px;
193  display: flex;
194  align-items: center;
195  justify-content: center;
196}
197.tooltip-container:hover .tooltip5:hover {
198  background: #bd081c;
199  fill: #fff;
200}
201/* Fim do tooltip pinterest */
202
203/* Inicio do tooltip dribbble */
204.tooltip6 {
205  position: absolute;
206  top: 100%;
207  left: 35%;
208  transform: translateX(70%);
209  opacity: 0;
210  visibility: hidden;
211  background: #fff;
212  fill: #ea4c89;
213  padding: 10px;
214  border-radius: 50px;
215  transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
216  z-index: 1;
217  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
218}
219
220.tooltip-container:hover .tooltip6 {
221  top: -79%;
222  opacity: 1;
223  visibility: visible;
224  background: #fff;
225  transform: translate(70%, -5px);
226  border-radius: 50px;
227  display: flex;
228  align-items: center;
229  justify-content: center;
230}
231.tooltip-container:hover .tooltip6:hover {
232  background: #ea4c89;
233  fill: #fff;
234}
235/* Fim do tooltip dribbble */
236
237/* Inicio do tooltip github */
238.tooltip7 {
239  position: absolute;
240  top: 100%;
241  left: 39%;
242  transform: translateX(70%);
243  opacity: 0;
244  visibility: hidden;
245  background: #fff;
246  fill: #000;
247  padding: 10px;
248  border-radius: 50px;
249  transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
250  z-index: 1;
251  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
252}
253
254.tooltip-container:hover .tooltip7 {
255  top: 104%;
256  opacity: 1;
257  visibility: visible;
258  background: #fff;
259  transform: translate(70%, -5px);
260  border-radius: 50px;
261  display: flex;
262  align-items: center;
263  justify-content: center;
264}
265.tooltip-container:hover .tooltip7:hover {
266  background: #000;
267  fill: #fff;
268}
269/* Fim do tooltip github */
270
271/* Inicio do tooltip reddit */
272.tooltip8 {
273  position: absolute;
274  top: 100%;
275  left: -150%;
276  transform: translateX(70%);
277  opacity: 0;
278  visibility: hidden;
279  background: #fff;
280  fill: #ff4500;
281  padding: 10px;
282  border-radius: 50px;
283  transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
284  z-index: 1;
285  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
286}
287
288.tooltip-container:hover .tooltip8 {
289  top: 101%;
290  opacity: 1;
291  visibility: visible;
292  background: #fff;
293  transform: translate(70%, -5px);
294  border-radius: 50px;
295  display: flex;
296  align-items: center;
297  justify-content: center;
298}
299.tooltip-container:hover .tooltip8:hover {
300  background: #ff4500;
301  fill: #fff;
302}
303/* Fim do tooltip reddit */
304
305/* Inicio do tooltip fixo */
306.tooltip9 {
307  position: absolute;
308  top: 0;
309  left: -115%;
310  opacity: 0;
311  visibility: hidden;
312  width: 150px;
313  height: 150px;
314  z-index: -1;
315}
316
317.tooltip-container:hover .tooltip9 {
318  top: -110%;
319  opacity: 1;
320  visibility: visible;
321  border-radius: 50%;
322  z-index: -1;
323}
324/* Fim do tooltip fixo */
325/* Por meio desse ultimo tooltip todos os outros podem
326ficar fixos quando houver no principal, para vê-lo dê um
327background black acima*/
328

/* This is an example, feel free to delete this code */
.tooltip-container {
  background: rgb(3, 169, 244);
  background: linear-gradient(
    138deg,
    rgba(3, 169, 244, 1) 15%,
    rgba(63, 180, 233, 1) 65%
  );
  position: relative;
  cursor: pointer;
  font-size: 17px;
  padding: 0.7em 0.7em;
  border-radius: 50px;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
.tooltip-container:hover {
  background: #fff;
  transition: all 0.6s;
}
.tooltip-container .text {
  display: flex;
  align-items: center;
  justify-content: center;
  fill: #fff;
  transition: all 0.2s;
}
.tooltip-container:hover .text {
  fill: rgb(3, 169, 244);
  transition: all 0.6s;
}

/* Inicio do tooltip twitter */
.tooltip1 {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  background: #fff;
  fill: #03a9f4;
  padding: 10px;
  border-radius: 50px;
  transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tooltip-container:hover .tooltip1 {
  top: 150%;
  opacity: 1;
  visibility: visible;
  background: #fff;
  border-radius: 50px;
  transform: translate(-50%, -5px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tooltip-container:hover .tooltip1:hover {
  background: #03a9f4;
  fill: #fff;
}
/* Fim do tooltip twitter */

/* Inicio do tooltip facebook */
.tooltip2 {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  background: #fff;
  fill: #0462df;
  padding: 10px;
  border-radius: 50px;
  transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tooltip-container:hover .tooltip2 {
  top: -120%;
  opacity: 1;
  visibility: visible;
  background: #fff;
  transform: translate(-50%, -5px);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tooltip-container:hover .tooltip2:hover {
  background: #0462df;
  fill: #fff;
}
/* Fim do tooltip facebook */

/* Inicio do tooltip whatsApp */
.tooltip3 {
  position: absolute;
  top: 100%;
  left: 60%;
  transform: translateX(80%);
  opacity: 0;
  visibility: hidden;
  background: #fff;
  fill: #1db954;
  padding: 10px;
  border-radius: 50px;
  transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tooltip-container:hover .tooltip3 {
  top: 10%;
  opacity: 1;
  visibility: visible;
  background: #fff;
  transform: translate(85%, -5px);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tooltip-container:hover .tooltip3:hover {
  background: #1db954;
  fill: #fff;
}
/* Fim do tooltip whatsApp */

/* Inicio do tooltip Discord */
.tooltip4 {
  position: absolute;
  top: 100%;
  left: -190%;
  transform: translateX(70%);
  opacity: 0;
  visibility: hidden;
  background: #fff;
  fill: #8c9eff;
  padding: 10px;
  border-radius: 50px;
  transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tooltip-container:hover .tooltip4 {
  top: 10%;
  opacity: 1;
  visibility: visible;
  background: #fff;
  transform: translate(70%, -5px);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tooltip-container:hover .tooltip4:hover {
  background: #8c9eff;
  fill: #fff;
}
/* Fim do tooltip Discord */

/* Inicio do tooltip pinterest */
.tooltip5 {
  position: absolute;
  top: 100%;
  left: -145%;
  transform: translateX(70%);
  opacity: 0;
  visibility: hidden;
  background: #fff;
  fill: #bd081c;
  padding: 10px;
  border-radius: 50px;
  transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tooltip-container:hover .tooltip5 {
  top: -78%;
  opacity: 1;
  visibility: visible;
  background: #fff;
  transform: translate(70%, -5px);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tooltip-container:hover .tooltip5:hover {
  background: #bd081c;
  fill: #fff;
}
/* Fim do tooltip pinterest */

/* Inicio do tooltip dribbble */
.tooltip6 {
  position: absolute;
  top: 100%;
  left: 35%;
  transform: translateX(70%);
  opacity: 0;
  visibility: hidden;
  background: #fff;
  fill: #ea4c89;
  padding: 10px;
  border-radius: 50px;
  transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tooltip-container:hover .tooltip6 {
  top: -79%;
  opacity: 1;
  visibility: visible;
  background: #fff;
  transform: translate(70%, -5px);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tooltip-container:hover .tooltip6:hover {
  background: #ea4c89;
  fill: #fff;
}
/* Fim do tooltip dribbble */

/* Inicio do tooltip github */
.tooltip7 {
  position: absolute;
  top: 100%;
  left: 39%;
  transform: translateX(70%);
  opacity: 0;
  visibility: hidden;
  background: #fff;
  fill: #000;
  padding: 10px;
  border-radius: 50px;
  transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tooltip-container:hover .tooltip7 {
  top: 104%;
  opacity: 1;
  visibility: visible;
  background: #fff;
  transform: translate(70%, -5px);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tooltip-container:hover .tooltip7:hover {
  background: #000;
  fill: #fff;
}
/* Fim do tooltip github */

/* Inicio do tooltip reddit */
.tooltip8 {
  position: absolute;
  top: 100%;
  left: -150%;
  transform: translateX(70%);
  opacity: 0;
  visibility: hidden;
  background: #fff;
  fill: #ff4500;
  padding: 10px;
  border-radius: 50px;
  transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tooltip-container:hover .tooltip8 {
  top: 101%;
  opacity: 1;
  visibility: visible;
  background: #fff;
  transform: translate(70%, -5px);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tooltip-container:hover .tooltip8:hover {
  background: #ff4500;
  fill: #fff;
}
/* Fim do tooltip reddit */

/* Inicio do tooltip fixo */
.tooltip9 {
  position: absolute;
  top: 0;
  left: -115%;
  opacity: 0;
  visibility: hidden;
  width: 150px;
  height: 150px;
  z-index: -1;
}

.tooltip-container:hover .tooltip9 {
  top: -110%;
  opacity: 1;
  visibility: visible;
  border-radius: 50%;
  z-index: -1;
}
/* Fim do tooltip fixo */
/* Por meio desse ultimo tooltip todos os outros podem
ficar fixos quando houver no principal, para vê-lo dê um
background black acima*/

Toggle prefixes

4.4K views

Copy to Figma

4.4K views

Comments

mozar0 15. January at 19:38

15. January at 19:38

Beautiful

rogerio-jose-gastao 15. January at 14:25

15. January at 14:25

That's amazing

No variations yet

MIT License

Copyright - 2024 Tsiangana (Tsiangana Zau) 

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.