Tooltip by gharsh11032000
This tooltip was created for Tooltip Challenge
#212121
1/* This is an example, feel free to delete this code */ 2.tooltip-container { 3 --background: #333333; 4 --color: #e8e8e8; 5 position: relative; 6 cursor: pointer; 7 transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); 8 font-size: 18px; 9 font-weight: 600; 10 color: var(--color); 11 padding: 0.7em 1.8em; 12 border-radius: 8px; 13 text-transform: uppercase; 14 height: 60px; 15 width: 180px; 16 display: grid; 17 place-items: center; 18 border: 2px solid var(--color); 19} 20 21.text { 22 position: absolute; 23 top: 0; 24 left: 0; 25 width: 100%; 26 height: 100%; 27 display: grid; 28 place-items: center; 29 transform-origin: -100%; 30 transform: scale(1); 31 transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); 32} 33 34.tooltip-container span:last-child { 35 position: absolute; 36 top: 0%; 37 left: 100%; 38 width: 100%; 39 height: 100%; 40 border-radius: 8px; 41 opacity: 1; 42 background-color: var(--background); 43 z-index: -1; 44 border: 2px solid var(--background); 45 transform: scale(0); 46 transform-origin: 0; 47 transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); 48 display: grid; 49 place-items: center; 50} 51 52.tooltip { 53 position: absolute; 54 top: 0; 55 left: 50%; 56 transform: translateX(-50%); 57 padding: 0.3em 0.6em; 58 opacity: 0; 59 pointer-events: none; 60 transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); 61 background: var(--background); 62 z-index: -1; 63 border-radius: 8px; 64 scale: 0; 65 transform-origin: 0 0; 66 text-transform: capitalize; 67 font-weight: 400; 68 font-size: 16px; 69 box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px; 70} 71 72.tooltip::before { 73 position: absolute; 74 content: ""; 75 height: 0.6em; 76 width: 0.6em; 77 bottom: -0.2em; 78 left: 50%; 79 transform: translate(-50%) rotate(45deg); 80 background: var(--background); 81} 82 83.tooltip-container:hover .tooltip { 84 top: -100%; 85 opacity: 1; 86 visibility: visible; 87 pointer-events: auto; 88 scale: 1; 89 animation: shake 0.5s ease-in-out both; 90} 91 92.tooltip-container:hover { 93 box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px; 94 color: white; 95 border-color: transparent; 96} 97 98.tooltip-container:hover span:last-child { 99 transform: scale(1); 100 left: 0; 101} 102 103.tooltip-container:hover .text { 104 opacity: 0; 105 top: 0%; 106 left: 100%; 107 transform: scale(0); 108} 109 110@keyframes shake { 111 0% { 112 rotate: 0; 113 } 114 115 25% { 116 rotate: 7deg; 117 } 118 119 50% { 120 rotate: -7deg; 121 } 122 123 75% { 124 rotate: 1deg; 125 } 126 127 100% { 128 rotate: 0; 129 } 130} 131
Β
3.6K views
3.6K views
Variations
1 MIT License