Tooltip by MRez321
This tooltip was created for Tooltip Challenge
#e8e8e8
1.tooltip-container { 2 --background: #7579e7; 3 background: var(--background); 4 position: relative; 5 cursor: pointer; 6 transition: all 0.2s; 7 font-size: 17px; 8 border-radius: 10px; 9 width: 8em; 10 11 display: flex; 12 justify-content: center; 13 align-items: center; 14} 15 16.tooltip { 17 position: absolute; 18 top: 0; 19 left: 30%; 20 transform: translateX(-50%); 21 padding: 0.3em 0.6em; 22 opacity: 0; 23 pointer-events: none; 24 transition: all 0.3s; 25 background: var(--background); 26 border-radius: 5px; 27 width: 7em; 28 text-align: center; 29} 30 31.tooltip::before { 32 position: absolute; 33 content: ""; 34 height: 0.6em; 35 width: 0.6em; 36 bottom: -0.2em; 37 left: 50%; 38 transform: translate(-50%) rotate(45deg); 39 background: var(--background); 40} 41 42.tooltip-container:hover .tooltip { 43 top: -100%; 44 opacity: 1; 45 visibility: visible; 46 pointer-events: auto; 47 animation: shake 500ms ease-in-out forwards; 48} 49 50@keyframes shake { 51 0% { 52 transform: rotate(2deg); 53 } 54 50% { 55 transform: rotate(-3deg); 56 } 57 70% { 58 transform: rotate(3deg); 59 } 60 61 100% { 62 transform: rotate(0deg); 63 } 64} 65 66.text { 67 position: relative; 68 padding: 0.7em 1.8em; 69 overflow: hidden; 70} 71 72.text::before { 73 content: "(^_^)/"; 74 position: absolute; 75 top: 100%; 76 left: 50%; 77 transform: translateX(-50%); 78 padding: inherit; 79 background-color: var(--background); 80 transition: 0.3s; 81} 82 83.tooltip-container:hover .text::before { 84 top: 0; 85} 86
939 views
939 views
MIT License