Tooltip by wilsondesouza
#e8e8e8
1ul { 2 list-style: none; 3} 4 5.example-2 { 6 display: flex; 7 justify-content: center; 8 align-items: center; 9} 10.example-2 .icon-content { 11 margin: 0 10px; 12 position: relative; 13} 14.example-2 .icon-content .tooltip { 15 position: absolute; 16 top: -30px; 17 left: 50%; 18 transform: translateX(-50%); 19 color: #fff; 20 padding: 6px 10px; 21 border-radius: 5px; 22 opacity: 0; 23 visibility: hidden; 24 font-size: 14px; 25 transition: all 0.3s ease; 26} 27.example-2 .icon-content:hover .tooltip { 28 opacity: 1; 29 visibility: visible; 30 top: -50px; 31} 32.example-2 .icon-content a { 33 position: relative; 34 overflow: hidden; 35 display: flex; 36 justify-content: center; 37 align-items: center; 38 width: 50px; 39 height: 50px; 40 border-radius: 50%; 41 color: #4d4d4d; 42 background-color: #fff; 43 transition: all 0.3s ease-in-out; 44} 45.example-2 .icon-content a:hover { 46 box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%); 47} 48.example-2 .icon-content a svg { 49 position: relative; 50 z-index: 1; 51 width: 30px; 52 height: 30px; 53} 54.example-2 .icon-content a:hover { 55 color: white; 56} 57.example-2 .icon-content a .filled { 58 position: absolute; 59 top: auto; 60 bottom: 0; 61 left: 0; 62 width: 100%; 63 height: 0; 64 background-color: #000; 65 transition: all 0.3s ease-in-out; 66} 67.example-2 .icon-content a:hover .filled { 68 height: 100%; 69} 70 71.example-2 .icon-content a[data-social="linkedin"] .filled, 72.example-2 .icon-content a[data-social="linkedin"] ~ .tooltip { 73 background-color: #0274b3; 74} 75 76.example-2 .icon-content a[data-social="github"] .filled, 77.example-2 .icon-content a[data-social="github"] ~ .tooltip { 78 background-color: #24262a; 79} 80.example-2 .icon-content a[data-social="instagram"] .filled, 81.example-2 .icon-content a[data-social="instagram"] ~ .tooltip { 82 background: linear-gradient( 83 45deg, 84 #405de6, 85 #5b51db, 86 #b33ab4, 87 #c135b4, 88 #e1306c, 89 #fd1f1f 90 ); 91} 92.example-2 .icon-content a[data-social="youtube"] .filled, 93.example-2 .icon-content a[data-social="youtube"] ~ .tooltip { 94 background-color: #ff0000; 95} 96
1.9K views
Variation of atooltip
MIT License