Tooltip by vikas7754
This tooltip was created for Tooltip Challenge
#212121
1.tooltip-container { 2 position: relative; 3 cursor: pointer; 4 transition: all 0.2s; 5 font-size: 17px; 6 border-radius: 10px; 7} 8 9.tooltip { 10 position: absolute; 11 top: 0; 12 left: 50%; 13 transform: translateX(-50%); 14 padding: 10px; 15 opacity: 0; 16 pointer-events: none; 17 transition: all 0.3s; 18 border-radius: 15px; 19 box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.2), 20 inset -5px -5px 15px rgba(255, 255, 255, 0.1), 21 5px 5px 15px rgba(0, 0, 0, 0.3), -5px -5px 15px rgba(255, 255, 255, 0.1); 22} 23 24.profile { 25 background: #2a2b2f; 26 border-radius: 10px 15px; 27 padding: 10px; 28 border: 1px solid rgba(11, 63, 95, 1); 29} 30 31.tooltip-container:hover .tooltip { 32 top: -150px; 33 opacity: 1; 34 visibility: visible; 35 pointer-events: auto; 36} 37 38.icon { 39 text-decoration: none; 40 color: #fff; 41 display: block; 42 position: relative; 43} 44.layer { 45 width: 55px; 46 height: 55px; 47 transition: transform 0.3s; 48} 49.icon:hover .layer { 50 transform: rotate(-35deg) skew(20deg); 51} 52.layer span { 53 position: absolute; 54 top: 0; 55 left: 0; 56 height: 100%; 57 width: 100%; 58 border: 1px solid #fff; 59 border-radius: 5px; 60 transition: all 0.3s; 61} 62 63.layer span, 64.text { 65 color: #1da1f2; 66 border-color: #1da1f2; 67} 68 69.icon:hover.layer span { 70 box-shadow: -1px 1px 3px #1da1f2; 71} 72.icon .text { 73 position: absolute; 74 left: 50%; 75 bottom: -5px; 76 opacity: 0; 77 font-weight: 500; 78 transform: translateX(-50%); 79 transition: bottom 0.3s ease, opacity 0.3s ease; 80} 81.icon:hover .text { 82 bottom: -35px; 83 opacity: 1; 84} 85 86.icon:hover .layer span:nth-child(1) { 87 opacity: 0.2; 88} 89.icon:hover .layer span:nth-child(2) { 90 opacity: 0.4; 91 transform: translate(5px, -5px); 92} 93.icon:hover .layer span:nth-child(3) { 94 opacity: 0.6; 95 transform: translate(10px, -10px); 96} 97.icon:hover .layer span:nth-child(4) { 98 opacity: 0.8; 99 transform: translate(15px, -15px); 100} 101.icon:hover .layer span:nth-child(5) { 102 opacity: 1; 103 transform: translate(20px, -20px); 104} 105 106.layer span.fab { 107 font-size: 30px; 108 line-height: 64px; 109 text-align: center; 110 fill: #1da1f2; 111 background: #000; 112} 113.user { 114 display: flex; 115 gap: 10px; 116} 117.img { 118 width: 50px; 119 height: 50px; 120 font-size: 25px; 121 font-weight: 700; 122 border: 1px solid #1da1f2; 123 border-radius: 10px; 124 display: flex; 125 align-items: center; 126 justify-content: center; 127 background: #fff; 128} 129.name { 130 font-size: 17px; 131 font-weight: 700; 132 color: #1da1f2; 133} 134.details { 135 display: flex; 136 flex-direction: column; 137 gap: 0; 138 color: #fff; 139} 140.about { 141 color: #ccc; 142 padding-top: 5px; 143} 144
5.7K views
5.7K views
Variations
21.8K views
MIT License