This post is saved as a draft.
#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
Variation of atooltip
Variation of atooltip