Tooltip by mRcOol7
#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: #3b5998; 26 border-radius: 10px 15px; 27 padding: 10px; 28 border: 1px solid #29487d; 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.icon .layer { 45 width: 55px; 46 height: 55px; 47 border: 3px solid #1877f2; 48 border-radius: 50%; 49 transition: transform 0.3s, border 0.3s ease, box-shadow 0.3s ease; 50 box-shadow: 0 0 15px rgba(24, 119, 242, 0.7), 0 0 20px rgba(24, 119, 242, 0.5); 51} 52 53.icon:hover .layer { 54 transform: rotate(-35deg) skew(20deg); 55 box-shadow: 0 0 30px rgba(24, 119, 242, 1), 0 0 40px rgba(24, 119, 242, 0.7); 56} 57 58.layer span { 59 position: absolute; 60 top: 0; 61 left: 0; 62 height: 100%; 63 width: 100%; 64 border: 1px solid #fff; 65 border-radius: 50%; 66 transition: all 0.3s; 67} 68 69.layer span, 70.text { 71 color: #1877f2; 72 border-color: #1877f2; 73} 74 75.icon:hover .layer span { 76 box-shadow: -1px 1px 3px #1877f2; 77} 78 79.icon .text { 80 position: absolute; 81 left: 50%; 82 bottom: -5px; 83 opacity: 0; 84 font-weight: 500; 85 transform: translateX(-50%); 86 transition: bottom 0.3s ease, opacity 0.3s ease; 87} 88 89.icon:hover .text { 90 bottom: -35px; 91 opacity: 1; 92} 93 94.icon:hover .layer span:nth-child(1) { 95 opacity: 0.2; 96} 97 98.icon:hover .layer span:nth-child(2) { 99 opacity: 0.4; 100 transform: translate(5px, -5px); 101} 102 103.icon:hover .layer span:nth-child(3) { 104 opacity: 0.6; 105 transform: translate(10px, -10px); 106} 107 108.icon:hover .layer span:nth-child(4) { 109 opacity: 0.8; 110 transform: translate(15px, -15px); 111} 112 113.icon:hover .layer span:nth-child(5) { 114 opacity: 1; 115 transform: translate(20px, -20px); 116} 117 118.facebookSVG { 119 font-size: 25px; 120 display: flex; 121 align-items: center; 122 justify-content: center; 123 background: #1877f2; 124 border-radius: 50%; 125 background: linear-gradient( 126 45deg, 127 #1877f2 0%, 128 #3b5998 25%, 129 #1877f2 50%, 130 #3b5998 75%, 131 #1877f2 100% 132 ); 133} 134 135.user { 136 display: flex; 137 gap: 10px; 138} 139 140.img { 141 width: 50px; 142 height: 50px; 143 font-size: 25px; 144 font-weight: 700; 145 border: 1px solid #1877f2; 146 border-radius: 10px; 147 display: flex; 148 align-items: center; 149 justify-content: center; 150 background: #fff; 151} 152 153.name { 154 font-size: 17px; 155 font-weight: 700; 156 color: #1877f2; 157} 158 159.details { 160 display: flex; 161 flex-direction: column; 162 gap: 0; 163 color: #fff; 164} 165 166.about { 167 color: #ccc; 168 padding-top: 5px; 169} 170
2.1K views
Variation of atooltip
MIT License