Tooltip by SouravBandyopadhyay
#e8e8e8
1.button { 2 --width: 100px; 3 --height: 35px; 4 --tooltip-height: 35px; 5 --tooltip-width: 90px; 6 --gap-between-tooltip-to-button: 18px; 7 --button-color: #222; 8 --tooltip-color: #fff; 9 width: var(--width); 10 height: var(--height); 11 background: var(--button-color); 12 position: relative; 13 text-align: center; 14 border-radius: 0.5em; 15 font-family: "Arial"; 16 transition: background 0.7s; 17} 18 19.button::before { 20 position: absolute; 21 content: attr(data-tooltip); 22 width: var(--tooltip-width); 23 height: var(--tooltip-height); 24 background-color: #555; 25 font-size: 0.9rem; 26 color: #fff; 27 border-radius: 0.25em; 28 line-height: var(--tooltip-height); 29 bottom: calc(var(--height) + var(--gap-between-tooltip-to-button) + 10px); 30 left: calc(50% - var(--tooltip-width) / 2); 31} 32 33.button::after { 34 position: absolute; 35 content: ""; 36 width: 0; 37 height: 0; 38 border: 10px solid transparent; 39 border-top-color: #555; 40 left: calc(50% - 10px); 41 bottom: calc(100% + var(--gap-between-tooltip-to-button) - 10px); 42} 43 44.button::after, 45.button::before { 46 opacity: 0; 47 visibility: hidden; 48 transition: all 0.5s; 49} 50 51.text { 52 display: flex; 53 align-items: center; 54 justify-content: center; 55} 56 57.button-wrapper, 58.text, 59.icon { 60 overflow: hidden; 61 position: absolute; 62 width: 100%; 63 height: 100%; 64 left: 0; 65 color: #fff; 66} 67 68.text { 69 top: 0; 70} 71 72.text, 73.icon { 74 transition: top 0.5s; 75} 76 77.icon { 78 color: #fff; 79 top: 100%; 80 display: flex; 81 align-items: center; 82 justify-content: center; 83} 84 85.icon svg { 86 width: 24px; 87 height: 24px; 88} 89 90.button:hover { 91 background: #222; 92} 93 94.button:hover .text { 95 top: -100%; 96} 97 98.button:hover .icon { 99 top: 0; 100} 101 102.button:hover:before, 103.button:hover:after { 104 opacity: 1; 105 visibility: visible; 106} 107 108.button:hover:after { 109 bottom: calc(var(--height) + var(--gap-between-tooltip-to-button) - 20px); 110} 111 112.button:hover:before { 113 bottom: calc(var(--height) + var(--gap-between-tooltip-to-button)); 114} 115
1.5K views
1.5K views
MIT License