Tooltip by Javierrocadev
This tooltip was created for Tooltip Challenge
#212121
1.tooltip-container { 2 --background: linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb); 3 position: relative; 4 color: aliceblue; 5 6 cursor: pointer; 7 transition: all 0.2s; 8 font-size: 17px; 9 padding: 0.7em 1.8em; 10 border-radius: 16px; 11} 12 13.tooltip { 14 position: absolute; 15 display: flex; 16 flex-direction: column; 17 gap: 6px; 18 width: 100px; 19 height: 120px; 20 z-index: -1; 21 top: 0; 22 left: 50%; 23 background-color: #212121; 24 color: antiquewhite; 25 transform: translateX(-50%); 26 padding: 0.3em 0.6em; 27 opacity: 0; 28 pointer-events: none; 29 transition: all 0.3s; 30 border-radius: 4px; 31 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 32 font-weight: bold; 33 font-size: 12px; 34 overflow: hidden; 35} 36 37.tooltip-item { 38 z-index: 5; 39 background-color: #171717; 40 border-radius: 4px; 41 padding: 4px; 42 font-weight: bolder; 43 font-size: 6px; 44} 45 46.tooltip::before { 47 position: absolute; 48 content: ""; 49 height: 0.5em; 50 width: 0.5em; 51 top: 0.8em; 52 left: 85%; 53 border-radius: 2px; 54 transform: rotate(45deg); 55 background: var(--background); 56 animation: tooltipBeforeAnimation 4s infinite alternate; 57} 58 59.tooltip::after { 60 position: absolute; 61 content: ""; 62 height: 3.6em; 63 width: 3.6em; 64 bottom: -0.8em; 65 border-radius: 999px; 66 filter: blur(8px); 67 right: -5%; 68 background: var(--background); 69 animation: tooltipAnimation 5s infinite alternate; 70} 71 72.btn { 73 background: var(--background); 74 border: none; 75 color: aliceblue; 76 cursor: pointer; 77 background-size: 100%; 78 transition: all 0.2s; 79 font-size: 12px; 80 padding: 0.7em 1.8em; 81 border-radius: 16px; 82 font-weight: 700; 83} 84.btn:hover { 85 background-size: 150%; 86 background-position-x: right; 87} 88 89@keyframes tooltipAnimation { 90 0% { 91 transform: scale(1); 92 } 93 100% { 94 transform: scale(1.8); 95 } 96} 97@keyframes tooltipBeforeAnimation { 98 0% { 99 transform: rotate(0deg); 100 } 101 100% { 102 transform: rotate(360deg); 103 } 104} 105 106.tooltip-container:hover .tooltip { 107 transform: scale(2); 108} 109 110.tooltip-container:hover .tooltip { 111 top: -210%; 112 left: 43%; 113 opacity: 1; 114 visibility: visible; 115 pointer-events: auto; 116} 117
358 views
358 views
MIT License