{"loaderData":{"0":null,"0-3":{"total":7392,"projects":[{"created":"2024-01-22T17:26:44.000Z","isPrivate":0,"projectId":"55631b","snapshot":"https://s1.qingting.work/runjs/2e57a1d7dc67.png?x-oss-process=style/webp-w-500","tags":null,"title":"tooltip by Ashe-T","updated":"2024-01-22T19:26:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1938,"cssLen":2490,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n \n \n GitHub\n \n \n

\n","css":".absolute {\n position: absolute;\n}\n.flex {\n display: flex;\n}\n.w-5 {\n width: 1.25rem;\n}\n.items-center {\n align-items: center;\n}\n.justify-center {\n justify-content: center;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.bg-gradient-to-r {\n background-image: linear-gradient(to right, var(--tw-gradient-stops));\n}\n.from-gray-800 {\n --tw-gradient-from: #1f2937 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(31 41 55 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.to-black {\n --tw-gradient-to: #000 var(--tw-gradient-to-position);\n}\n.p-2 {\n padding: 0.5rem;\n}\n.font-semibold {\n font-weight: 600;\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.opacity-0 {\n opacity: 0;\n}\n.drop-shadow-xl {\n --tw-drop-shadow: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03))\n drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)\n var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)\n var(--tw-sepia) var(--tw-drop-shadow);\n}\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-500 {\n transition-duration: 500ms;\n}\n.duration-700 {\n transition-duration: 700ms;\n}\n.hover\\:translate-y-3:hover {\n --tw-translate-y: 0.75rem;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.hover\\:from-\\[\\#331029\\]:hover {\n --tw-gradient-from: #331029 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(51 16 41 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.hover\\:to-\\[\\#310413\\]:hover {\n --tw-gradient-to: #310413 var(--tw-gradient-to-position);\n}\n.group:hover .group-hover\\:-translate-y-10 {\n --tw-translate-y: -2.5rem;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.group:hover .group-hover\\:text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.group:hover .group-hover\\:text-gray-700 {\n --tw-text-opacity: 1;\n color: rgb(55 65 81 / var(--tw-text-opacity));\n}\n.group:hover .group-hover\\:opacity-100 {\n opacity: 1;\n}\n"},{"created":"2024-01-22T17:26:44.000Z","isPrivate":0,"projectId":"cf42c1","snapshot":"https://s1.qingting.work/runjs/f15795af2627.png?x-oss-process=style/webp-w-500","tags":null,"title":"tooltip by escannord","updated":"2024-01-22T19:26:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":14813,"cssLen":3039,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Uiverse.io\n Tooltip\n \n

\n","css":"/* This is an example, feel free to delete this code */\n.tooltip-container {\n --background: #4132c9;\n --support-size: 50px;\n --tooltip-radius: 10px 10px 10px 0;\n --outline-border-color: #0096aa;\n position: relative;\n background: transparent;\n cursor: pointer;\n transition: all 0.2s;\n font-size: 17px;\n font-weight: bold;\n padding: 0.7em 1.8em;\n color: var(--background);\n border: solid 2px var(--background);\n}\n\n.tooltip-container::before {\n content: \"\";\n display: inline-block;\n border-radius: 50%;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: -1;\n transition: all 0.5s linear;\n outline: 3px solid transparent;\n background: var(--background);\n}\n.tooltip-container:hover {\n color: white;\n}\n.tooltip-container:hover:before {\n width: 100%;\n height: 100%;\n border-radius: 0;\n outline-offset: 5px;\n outline-color: var(--outline-border-color);\n}\n.tooltip {\n position: absolute;\n display: inline-block;\n top: 0;\n left: 50%;\n transform: translateX(-5%);\n padding: 0.3em 0.6em;\n opacity: 0;\n pointer-events: none;\n transition: all 0.3s;\n background: var(--background);\n border-radius: var(--tooltip-radius);\n color: white;\n box-shadow: 3px 3px 0px var(--outline-border-color);\n}\n\n.tooltip::after {\n content: \"Hello!👋\";\n display: inline-block;\n position: absolute;\n width: 100%;\n height: 100%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: var(--background);\n text-align: center;\n border-radius: var(--tooltip-radius);\n}\n.tooltip::before {\n position: absolute;\n content: \"\";\n bottom: 0;\n border-style: solid;\n border-width: 10px;\n left: 0;\n transform: translateX(-50%);\n border-color: transparent var(--background) var(--background) transparent;\n box-shadow: 0px 3px 0px var(--outline-border-color);\n}\n\n.tooltip-container:hover .tooltip::after {\n animation: hidden 0.5s 1.5s linear forwards;\n}\n\n.tooltip-container:hover .tooltip {\n top: calc(-100% - var(--support-size) * 0.5);\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n animation: shake 0.5s 1s linear;\n transition: all 0.3s 0.5s;\n}\n\n@keyframes hidden {\n 50% {\n transform: translate(-50%, -50%) scale(0.5);\n background-color: #1ca0f5;\n }\n 100% {\n transform: translate(0, -50%) scale(0.5);\n opacity: 0;\n }\n}\n\n@keyframes shake {\n 0%,\n 40%,\n 80% {\n transform: translateX(-10%);\n }\n 20%,\n 60%,\n 100% {\n transform: translateX(0);\n }\n}\n\n.st2 {\n fill: #f9c8a7;\n}\n.st3 {\n fill: #ff9e97;\n}\n.st6 {\n fill: #d72e48;\n}\n.st7 {\n fill: #ffffff;\n}\n.st8 {\n fill: #ff8d7f;\n}\n.st10 {\n fill: #3d3d3b;\n}\n.st11 {\n fill: #1ca0f5;\n}\n.st12 {\n opacity: 0.2;\n}\n.st14 {\n fill: #b7b7b7;\n}\n.st15 {\n fill: #ead9cf;\n}\n#Calque_1 {\n display: inline-block;\n height: var(--support-size);\n position: absolute;\n opacity: 0;\n transition: all 0.5s;\n z-index: -1;\n left: 0;\n top: 0;\n}\n#left_x5F_arm_2_ {\n transform: translateX(2px);\n}\n\n.tooltip-container:hover #Calque_1 {\n top: calc(var(--support-size) * -1);\n opacity: 1;\n}\n"},{"created":"2024-01-22T17:26:44.000Z","isPrivate":0,"projectId":"4179cf","snapshot":"https://s1.qingting.work/runjs/164844820aba.png?x-oss-process=style/webp-w-500","tags":null,"title":"tooltip by G4b413l","updated":"2024-01-22T19:26:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":84,"cssLen":786,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Hover me\n

Hi there !

\n","css":".tooltip {\n position: relative;\n display: inline-block;\n cursor: pointer;\n background-color: #282828;\n color: #f1f1f1;\n padding: 1em 3em;\n border-radius: 1em;\n}\n\n.tooltip .tooltiptext {\n visibility: hidden;\n width: 200px;\n background-color: #28282817;\n color: #282828;\n text-align: center;\n border-radius: 5px;\n padding: 10px;\n position: absolute;\n z-index: 1;\n bottom: 125%;\n left: 50%;\n transform: translateX(-50%);\n opacity: 0;\n transition: opacity 0.3s;\n}\n\n.tooltip:hover .tooltiptext {\n visibility: visible;\n opacity: 1;\n}\n\n.tooltip .tooltiptext::after {\n content: \"\";\n position: absolute;\n top: 100%;\n left: 50%;\n border-width: 8px;\n border-style: solid;\n border-color: #28282817 transparent transparent transparent;\n transform: translateX(-50%);\n}\n"},{"created":"2024-01-22T17:26:44.000Z","isPrivate":0,"projectId":"9d58d6","snapshot":"https://s1.qingting.work/runjs/b06858a289ed.png?x-oss-process=style/webp-w-500","tags":null,"title":"tooltip by escannord","updated":"2024-01-22T19:26:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":935,"cssLen":2987,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n","css":"/* This is very original.\nI'm also too lazy to figure out how to add the arrow\nwithout excessive SVG. I know I'm not going to win, so\nwhy not just try to emulate the thing in the image */\n.tooltip-container {\n --background: #fefbff;\n --inner-shadow: #9faef9;\n --inner-outline: #34217d;\n --inner-outline-bottom: #fafcfe;\n --inner-outline-middle: #8880d5;\n --inner-outline-outer-top: #fefcff;\n --inner-outline-outer-bottom-1: #29107b;\n --inner-outline-outer-bottom-2: #5b42c4;\n --inner-outline-outer-bottom-3: #200265;\n --line-1: #8676c9;\n --line-2: #5c69ca;\n position: relative;\n background: var(--background);\n cursor: pointer;\n transition: all 0.2s;\n font-size: 17px;\n padding: 0.7em 1.8em;\n border-radius: 5px;\n box-shadow: inset 0px 1px 8px 1px var(--inner-shadow),\n 0px 2px 0px 0px var(--inner-outline-bottom),\n 0px -2px 0px 0px var(--inner-outline),\n -2px -2px 0px 0px var(--inner-outline),\n 2px -2px 0px 0px var(--inner-outline),\n 0px 0px 0px 6px var(--inner-outline-middle),\n 0px -2px 0px 7px var(--inner-outline-outer-top),\n 0px 4px 0px 7px var(--inner-outline-outer-bottom-1);\n}\n\n.tooltip-icon {\n display: inline-block;\n vertical-align: top;\n width: 1.5em;\n}\n\n.tooltip-icon path {\n stroke-width: 2px;\n stroke: var(--inner-outline);\n stroke-linejoin: round;\n}\n\n.tooltip-lines {\n display: flex;\n flex-direction: column;\n gap: 0.4em;\n}\n\n.tooltip-line-1 {\n height: 0.2em;\n width: 4em;\n border-radius: 10em;\n display: inline-block;\n background: var(--line-1);\n}\n\n.tooltip-line-2 {\n height: 0.2em;\n width: 3em;\n border-radius: 10em;\n display: inline-block;\n background: var(--line-2);\n}\n\n.tooltip {\n position: absolute;\n display: flex;\n gap: 0.4em;\n align-items: center;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n padding: 0.6em 0.8em;\n opacity: 0;\n pointer-events: none;\n transition: all 0.3s;\n background: var(--background);\n border-radius: 0.7em;\n\n box-shadow: inset 0px 1px 8px 1px var(--inner-shadow),\n 0px 2px 0px 0px var(--inner-outline-bottom),\n 0px -2px 0px 0px var(--inner-outline),\n -2px -2px 0px 0px var(--inner-outline),\n 2px -2px 0px 0px var(--inner-outline),\n 0px 0px 0px 6px var(--inner-outline-middle),\n 0px -2px 0px 7px var(--inner-outline-outer-top),\n 0px 4px 0px 7px var(--inner-outline-outer-bottom-1),\n 0px 7px 0px 7px var(--inner-outline-outer-bottom-2),\n 0px 10px 0px 7px var(--inner-outline-outer-bottom-3);\n}\n\n.tooltip::before {\n content: \"\";\n position: absolute;\n height: 1em;\n width: 1em;\n bottom: -0.2em;\n left: 50%;\n transform: translate(-50%) translateY(2px) rotate(45deg);\n background: var(--background);\n border-radius: 0.2em;\n box-shadow: 1px 1px 0px white, 5px 5px 0px rgb(136, 128, 213),\n 9px 9px 0px rgb(41, 16, 123), 12px 12px 0px #5b42c4,\n 14px 14px 0px rgb(41, 16, 123), inset -3px -3px 3px #9faef97a;\n}\n\n.tooltip-container:hover .tooltip {\n top: -4.5em;\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n}\n"},{"created":"2024-01-22T17:26:44.000Z","isPrivate":0,"projectId":"098a56","snapshot":"https://s1.qingting.work/runjs/ff0de1bb8234.png?x-oss-process=style/webp-w-500","tags":null,"title":"tooltip by Tsiangana","updated":"2024-01-22T19:26:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":8056,"cssLen":6854,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n","css":"/* This is an example, feel free to delete this code */\n.tooltip-container {\n background: rgb(3, 169, 244);\n background: linear-gradient(\n 138deg,\n rgba(3, 169, 244, 1) 15%,\n rgba(63, 180, 233, 1) 65%\n );\n position: relative;\n cursor: pointer;\n font-size: 17px;\n padding: 0.7em 0.7em;\n border-radius: 50px;\n box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);\n}\n.tooltip-container:hover {\n background: #fff;\n transition: all 0.6s;\n}\n.tooltip-container .text {\n display: flex;\n align-items: center;\n justify-content: center;\n fill: #fff;\n transition: all 0.2s;\n}\n.tooltip-container:hover .text {\n fill: rgb(3, 169, 244);\n transition: all 0.6s;\n}\n\n/* Inicio do tooltip twitter */\n.tooltip1 {\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n opacity: 0;\n visibility: hidden;\n background: #fff;\n fill: #03a9f4;\n padding: 10px;\n border-radius: 50px;\n transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;\n z-index: 1;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n.tooltip-container:hover .tooltip1 {\n top: 150%;\n opacity: 1;\n visibility: visible;\n background: #fff;\n border-radius: 50px;\n transform: translate(-50%, -5px);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.tooltip-container:hover .tooltip1:hover {\n background: #03a9f4;\n fill: #fff;\n}\n/* Fim do tooltip twitter */\n\n/* Inicio do tooltip facebook */\n.tooltip2 {\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n opacity: 0;\n visibility: hidden;\n background: #fff;\n fill: #0462df;\n padding: 10px;\n border-radius: 50px;\n transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;\n z-index: 1;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n.tooltip-container:hover .tooltip2 {\n top: -120%;\n opacity: 1;\n visibility: visible;\n background: #fff;\n transform: translate(-50%, -5px);\n border-radius: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.tooltip-container:hover .tooltip2:hover {\n background: #0462df;\n fill: #fff;\n}\n/* Fim do tooltip facebook */\n\n/* Inicio do tooltip whatsApp */\n.tooltip3 {\n position: absolute;\n top: 100%;\n left: 60%;\n transform: translateX(80%);\n opacity: 0;\n visibility: hidden;\n background: #fff;\n fill: #1db954;\n padding: 10px;\n border-radius: 50px;\n transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;\n z-index: 1;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n.tooltip-container:hover .tooltip3 {\n top: 10%;\n opacity: 1;\n visibility: visible;\n background: #fff;\n transform: translate(85%, -5px);\n border-radius: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.tooltip-container:hover .tooltip3:hover {\n background: #1db954;\n fill: #fff;\n}\n/* Fim do tooltip whatsApp */\n\n/* Inicio do tooltip Discord */\n.tooltip4 {\n position: absolute;\n top: 100%;\n left: -190%;\n transform: translateX(70%);\n opacity: 0;\n visibility: hidden;\n background: #fff;\n fill: #8c9eff;\n padding: 10px;\n border-radius: 50px;\n transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;\n z-index: 1;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n.tooltip-container:hover .tooltip4 {\n top: 10%;\n opacity: 1;\n visibility: visible;\n background: #fff;\n transform: translate(70%, -5px);\n border-radius: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.tooltip-container:hover .tooltip4:hover {\n background: #8c9eff;\n fill: #fff;\n}\n/* Fim do tooltip Discord */\n\n/* Inicio do tooltip pinterest */\n.tooltip5 {\n position: absolute;\n top: 100%;\n left: -145%;\n transform: translateX(70%);\n opacity: 0;\n visibility: hidden;\n background: #fff;\n fill: #bd081c;\n padding: 10px;\n border-radius: 50px;\n transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;\n z-index: 1;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n.tooltip-container:hover .tooltip5 {\n top: -78%;\n opacity: 1;\n visibility: visible;\n background: #fff;\n transform: translate(70%, -5px);\n border-radius: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.tooltip-container:hover .tooltip5:hover {\n background: #bd081c;\n fill: #fff;\n}\n/* Fim do tooltip pinterest */\n\n/* Inicio do tooltip dribbble */\n.tooltip6 {\n position: absolute;\n top: 100%;\n left: 35%;\n transform: translateX(70%);\n opacity: 0;\n visibility: hidden;\n background: #fff;\n fill: #ea4c89;\n padding: 10px;\n border-radius: 50px;\n transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;\n z-index: 1;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n.tooltip-container:hover .tooltip6 {\n top: -79%;\n opacity: 1;\n visibility: visible;\n background: #fff;\n transform: translate(70%, -5px);\n border-radius: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.tooltip-container:hover .tooltip6:hover {\n background: #ea4c89;\n fill: #fff;\n}\n/* Fim do tooltip dribbble */\n\n/* Inicio do tooltip github */\n.tooltip7 {\n position: absolute;\n top: 100%;\n left: 39%;\n transform: translateX(70%);\n opacity: 0;\n visibility: hidden;\n background: #fff;\n fill: #000;\n padding: 10px;\n border-radius: 50px;\n transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;\n z-index: 1;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n.tooltip-container:hover .tooltip7 {\n top: 104%;\n opacity: 1;\n visibility: visible;\n background: #fff;\n transform: translate(70%, -5px);\n border-radius: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.tooltip-container:hover .tooltip7:hover {\n background: #000;\n fill: #fff;\n}\n/* Fim do tooltip github */\n\n/* Inicio do tooltip reddit */\n.tooltip8 {\n position: absolute;\n top: 100%;\n left: -150%;\n transform: translateX(70%);\n opacity: 0;\n visibility: hidden;\n background: #fff;\n fill: #ff4500;\n padding: 10px;\n border-radius: 50px;\n transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;\n z-index: 1;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n.tooltip-container:hover .tooltip8 {\n top: 101%;\n opacity: 1;\n visibility: visible;\n background: #fff;\n transform: translate(70%, -5px);\n border-radius: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.tooltip-container:hover .tooltip8:hover {\n background: #ff4500;\n fill: #fff;\n}\n/* Fim do tooltip reddit */\n\n/* Inicio do tooltip fixo */\n.tooltip9 {\n position: absolute;\n top: 0;\n left: -115%;\n opacity: 0;\n visibility: hidden;\n width: 150px;\n height: 150px;\n z-index: -1;\n}\n\n.tooltip-container:hover .tooltip9 {\n top: -110%;\n opacity: 1;\n visibility: visible;\n border-radius: 50%;\n z-index: -1;\n}\n/* Fim do tooltip fixo */\n/* Por meio desse ultimo tooltip todos os outros podem\nficar fixos quando houver no principal, para vê-lo dê um\nbackground black acima*/\n"},{"created":"2024-01-22T17:26:44.000Z","isPrivate":0,"projectId":"264ba1","snapshot":"https://s1.qingting.work/runjs/e93bfd3b5007.png?x-oss-process=style/webp-w-500","tags":null,"title":"tooltip by elijahgummer","updated":"2024-01-22T19:26:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":117,"cssLen":908,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Uiverse.io\n Tooltip\n

\n","css":".tooltip-container {\n --background: #22d3ee;\n position: relative;\n background: var(--background);\n cursor: pointer;\n transition: background 0.3s;\n font-size: 17px;\n padding: 0.7em 1.8em;\n}\n\n.tooltip {\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translateX(-50%) translateY(-10%); /* Adjusted the initial position */\n opacity: 0;\n pointer-events: none;\n transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);\n background: var(--background);\n color: #fff;\n border-radius: 0.3em;\n box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);\n text-align: center;\n font-size: 14px;\n width: 120%; /* Adjusted the width */\n padding: 0.5em 1em; /* Adjusted padding */\n white-space: nowrap; /* Prevent text wrapping */\n}\n\n.tooltip-container:hover .tooltip {\n top: -100%; /* Adjusted the tooltip position */\n opacity: 1;\n pointer-events: auto;\n transform: translateX(-50%) translateY(0);\n}\n"},{"created":"2024-01-22T17:26:44.000Z","isPrivate":0,"projectId":"feab64","snapshot":"https://s1.qingting.work/runjs/c62d10da1e31.png?x-oss-process=style/webp-w-500","tags":null,"title":"tooltip by Quezaquo","updated":"2024-01-22T19:26:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":125,"cssLen":1606,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Hover me !\n

Heyy👋

\n","css":".container {\n font-size: 18px;\n color: #333;\n position: relative;\n cursor: pointer;\n display: inline-block;\n}\n\n.hover-me {\n position: relative;\n z-index: 1;\n text-decoration: underline;\n text-underline-offset: 4px;\n text-decoration-color: #333;\n}\n\n.tooltip {\n width: 100%;\n height: 10px;\n background: #ffffff;\n padding: 0.25em;\n text-align: center;\n position: absolute;\n top: 40px;\n left: 0;\n opacity: 0;\n visibility: hidden;\n transform-origin: center top;\n box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);\n transition: opacity 0.3s ease-in-out;\n}\n\n.tooltip::before {\n content: \"\";\n position: absolute;\n bottom: -8px;\n left: 80%;\n transform: translateX(-50%);\n border-width: 8px 7px 0;\n border-style: solid;\n border-color: #ffffff transparent transparent transparent;\n box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);\n}\n\n.tooltip p {\n margin: 0;\n color: #333;\n font-weight: 600;\n}\n\n.container:hover .tooltip {\n top: -10px;\n opacity: 1;\n visibility: visible;\n animation: goPopup 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;\n}\n\n.container:hover .tooltip p {\n animation: bounce 2s ease-in-out infinite;\n}\n\n@keyframes goPopup {\n 0% {\n transform: translateY(0) scaleY(0);\n opacity: 0;\n }\n 50% {\n transform: translateY(-50%) scaleY(1.2);\n opacity: 1;\n }\n 100% {\n transform: translateY(-100%) scaleY(1);\n border-radius: 8px;\n opacity: 1;\n height: 40px;\n }\n}\n\n@keyframes bounce {\n 0%,\n 20%,\n 50%,\n 80%,\n 100% {\n transform: translateY(0);\n }\n 40% {\n transform: translateY(-3px);\n }\n 60% {\n transform: translateY(-2px);\n }\n}\n"},{"created":"2024-01-22T17:26:44.000Z","isPrivate":0,"projectId":"be4572","snapshot":"https://s1.qingting.work/runjs/007091a57137.png?x-oss-process=style/webp-w-500","tags":null,"title":"tooltip by vnuny","updated":"2024-01-22T19:26:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":285,"cssLen":2366,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n Tip\n

Use Navbar to navigate the website quickly and easily.

\n","css":".item-hints {\n --purple: #720c8f;\n cursor: pointer;\n display: flex;\n justify-content: flex-start;\n padding-right: 170px;\n}\n.item-hints .hint {\n margin: 150px auto;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.item-hints .hint-dot {\n z-index: 3;\n border: 1px solid #ffe4e4;\n border-radius: 50%;\n width: 60px;\n height: 60px;\n -webkit-transform: translate(-0%, -0%) scale(0.95);\n transform: translate(-0%, -0%) scale(0.95);\n margin: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n}\n.item-hints .hint-radius {\n background-color: rgba(255, 255, 255, 0.1);\n border-radius: 50%;\n position: absolute;\n top: 50%;\n left: 50%;\n margin: -125px 0 0 -125px;\n opacity: 0;\n visibility: hidden;\n -webkit-transform: scale(0);\n transform: scale(0);\n}\n.item-hints .hint[data-position=\"1\"] .hint-content {\n top: 85px;\n left: 50%;\n margin-left: 56px;\n}\n.item-hints .hint-content {\n width: 300px;\n position: absolute;\n z-index: 5;\n padding: 35px 0;\n opacity: 0;\n transition: opacity 0.7s ease, visibility 0.7s ease;\n color: #fff;\n visibility: hidden;\n pointer-events: none;\n}\n.item-hints .hint:hover .hint-content {\n position: absolute;\n z-index: 5;\n padding: 35px 0;\n opacity: 1;\n -webkit-transition: opacity 0.7s ease, visibility 0.7s ease;\n transition: opacity 0.7s ease, visibility 0.7s ease;\n color: #fff;\n visibility: visible;\n pointer-events: none;\n}\n.item-hints .hint-content::before {\n width: 0px;\n bottom: 29px;\n left: 0;\n content: \"\";\n background-color: #fff;\n height: 1px;\n position: absolute;\n transition: width 0.4s;\n}\n.item-hints .hint:hover .hint-content::before {\n width: 180px;\n transition: width 0.4s;\n}\n.item-hints .hint-content::after {\n -webkit-transform-origin: 0 50%;\n transform-origin: 0 50%;\n -webkit-transform: rotate(-225deg);\n transform: rotate(-225deg);\n bottom: 29px;\n left: 0;\n width: 80px;\n content: \"\";\n background-color: #fff;\n height: 1px;\n position: absolute;\n opacity: 1;\n -webkit-transition: opacity 0.5s ease;\n transition: opacity 0.5s ease;\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n}\n.item-hints .hint:hover .hint-content::after {\n opacity: 1;\n visibility: visible;\n}\n.item-hints .hint[data-position=\"4\"] .hint-content {\n bottom: 85px;\n left: 50%;\n margin-left: 56px;\n}\n"},{"created":"2024-01-22T17:26:44.000Z","isPrivate":0,"projectId":"ff07f2","snapshot":"https://s1.qingting.work/runjs/d6fae46dc088.png?x-oss-process=style/webp-w-500","tags":null,"title":"tooltip by vikas7754","updated":"2024-01-22T19:26:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1098,"cssLen":2499,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

User

@username

500+ Connections

\n \n

\n \n \n \n \n \n \n \n

\n \n

\n","css":".tooltip-container {\n position: relative;\n cursor: pointer;\n transition: all 0.2s;\n font-size: 17px;\n border-radius: 10px;\n}\n\n.tooltip {\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n padding: 10px;\n opacity: 0;\n pointer-events: none;\n transition: all 0.3s;\n border-radius: 15px;\n box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.2),\n inset -5px -5px 15px rgba(255, 255, 255, 0.1),\n 5px 5px 15px rgba(0, 0, 0, 0.3), -5px -5px 15px rgba(255, 255, 255, 0.1);\n}\n\n.profile {\n background: #2a2b2f;\n border-radius: 10px 15px;\n padding: 10px;\n border: 1px solid rgba(11, 63, 95, 1);\n}\n\n.tooltip-container:hover .tooltip {\n top: -150px;\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n}\n\n.icon {\n text-decoration: none;\n color: #fff;\n display: block;\n position: relative;\n}\n.layer {\n width: 55px;\n height: 55px;\n transition: transform 0.3s;\n}\n.icon:hover .layer {\n transform: rotate(-35deg) skew(20deg);\n}\n.layer span {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n border: 1px solid #fff;\n border-radius: 5px;\n transition: all 0.3s;\n}\n\n.layer span,\n.text {\n color: #1da1f2;\n border-color: #1da1f2;\n}\n\n.icon:hover.layer span {\n box-shadow: -1px 1px 3px #1da1f2;\n}\n.icon .text {\n position: absolute;\n left: 50%;\n bottom: -5px;\n opacity: 0;\n font-weight: 500;\n transform: translateX(-50%);\n transition: bottom 0.3s ease, opacity 0.3s ease;\n}\n.icon:hover .text {\n bottom: -35px;\n opacity: 1;\n}\n\n.icon:hover .layer span:nth-child(1) {\n opacity: 0.2;\n}\n.icon:hover .layer span:nth-child(2) {\n opacity: 0.4;\n transform: translate(5px, -5px);\n}\n.icon:hover .layer span:nth-child(3) {\n opacity: 0.6;\n transform: translate(10px, -10px);\n}\n.icon:hover .layer span:nth-child(4) {\n opacity: 0.8;\n transform: translate(15px, -15px);\n}\n.icon:hover .layer span:nth-child(5) {\n opacity: 1;\n transform: translate(20px, -20px);\n}\n\n.layer span.fab {\n font-size: 30px;\n line-height: 64px;\n text-align: center;\n fill: #1da1f2;\n background: #000;\n}\n.user {\n display: flex;\n gap: 10px;\n}\n.img {\n width: 50px;\n height: 50px;\n font-size: 25px;\n font-weight: 700;\n border: 1px solid #1da1f2;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #fff;\n}\n.name {\n font-size: 17px;\n font-weight: 700;\n color: #1da1f2;\n}\n.details {\n display: flex;\n flex-direction: column;\n gap: 0;\n color: #fff;\n}\n.about {\n color: #ccc;\n padding-top: 5px;\n}\n"},{"created":"2024-01-22T17:26:44.000Z","isPrivate":0,"projectId":"44ca7f","snapshot":"https://s1.qingting.work/runjs/46396e1d8630.png?x-oss-process=style/webp-w-500","tags":null,"title":"tooltip by theleaderofenemy","updated":"2024-01-22T19:26:52.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":117,"cssLen":858,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Tooltip\n Uiverse.io\n

\n","css":".tooltip-container {\n position: relative;\n display: inline-block;\n margin: 20px;\n}\n\n.text {\n color: #333;\n font-size: 18px;\n cursor: pointer;\n}\n\n.tooltip {\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n opacity: 0;\n visibility: hidden;\n background: #0b798a;\n color: #fff;\n padding: 10px;\n border-radius: 4px;\n transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;\n z-index: 1;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n.tooltip::before {\n content: \"\";\n position: absolute;\n bottom: 100%;\n left: 50%;\n border-width: 8px;\n border-style: solid;\n border-color: transparent transparent #0b798a transparent;\n transform: translateX(-50%);\n}\n\n.tooltip-container:hover .tooltip {\n top: 120%;\n opacity: 1;\n visibility: visible;\n background: #0e94a0;\n transform: translate(-50%, -5px);\n}\n"},{"created":"2024-01-22T17:26:43.000Z","isPrivate":0,"projectId":"f0f537","snapshot":"https://s1.qingting.work/runjs/0119cbacc9af.png?x-oss-process=style/webp-w-500","tags":null,"title":"tooltip by sahilxkhadka","updated":"2024-01-22T19:26:49.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1010,"cssLen":3771,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n Hover For Tooltip\n \n

\n \n

This is a tooltip.

\n \n \n\n","css":".absolute{position:absolute}.relative{position:relative}.-top-12{top:-3rem}.left-1\\/2{left:50%}.z-50{z-index:50}.mb-2{margin-bottom:0.5rem}.mr-2{margin-right:0.5rem}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.h-0{height:0px}.w-fit{width:-moz-fit-content;width:fit-content}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.whitespace-nowrap{white-space:nowrap}.rounded-lg{border-radius:0.5rem}.rounded-md{border-radius:0.375rem}.rounded-sm{border-radius:0.125rem}.border-l-8{border-left-width:8px}.border-r-8{border-right-width:8px}.border-t-8{border-top-width:8px}.border-transparent{border-color:transparent}.border-t-black{--tw-border-opacity:1;border-top-color:rgb(0 0 0 / var(--tw-border-opacity))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right, var(--tw-gradient-stops))}.from-purple-500{--tw-gradient-from:#a855f7 var(--tw-gradient-from-position);--tw-gradient-to:rgb(168 85 247 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-pink-500{--tw-gradient-to:#ec4899 var(--tw-gradient-to-position)}.p-0{padding:0px}.p-0\\.5{padding:0.125rem}.px-2{padding-left:0.5rem;padding-right:0.5rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-1{padding-top:0.25rem;padding-bottom:0.25rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-2\\.5{padding-top:0.625rem;padding-bottom:0.625rem}.text-center{text-align:center}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-medium{font-weight:500}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity))}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225 / var(--tw-text-opacity))}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-75{transition-duration:75ms}.ease-in{transition-timing-function:cubic-bezier(0.4, 0, 1, 1)}.before\\:-top-2::before{content:var(--tw-content);top:-0.5rem}.hover\\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-4:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.focus\\:ring-purple-200:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(233 213 255 / var(--tw-ring-opacity))}.group:hover .group-hover\\:block{display:block}.group:hover .group-hover\\:bg-opacity-0{--tw-bg-opacity:0}.group:hover .group-hover\\:from-purple-500{--tw-gradient-from:#a855f7 var(--tw-gradient-from-position);--tw-gradient-to:rgb(168 85 247 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.group:hover .group-hover\\:to-pink-500{--tw-gradient-to:#ec4899 var(--tw-gradient-to-position)}@media (prefers-color-scheme: dark){.dark\\:bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39 / var(--tw-bg-opacity))}.dark\\:text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.dark\\:focus\\:ring-purple-800:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(107 33 168 / var(--tw-ring-opacity))}}"},{"created":"2024-01-22T17:26:43.000Z","isPrivate":0,"projectId":"ce28ff","snapshot":"https://s1.qingting.work/runjs/4e31259feab1.png?x-oss-process=style/webp-w-500","tags":null,"title":"tooltip by ayman-ashine","updated":"2024-01-22T19:26:49.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3851,"cssLen":4041,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Uiverse.io\n

\n \n \n \n \n \n\n \n \n Check Our Website\n \n\n","css":".absolute{position:absolute}.relative{position:relative}.bottom-0{bottom:0px}.left-0{left:0px}.left-1\\/2{left:50%}.top-0{top:0px}.flex{display:flex}.h-full{height:100%}.w-full{width:100%}.-translate-y-\\[300\\%\\]{--tw-translate-y:-300%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-full{--tw-translate-x:100%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-1\\/2{--tw-translate-y:50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-45{--tw-rotate:45deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.skew-y-\\[20deg\\]{--tw-skew-y:20deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1{gap:0.25rem}.rounded-full{border-radius:9999px}.rounded-md{border-radius:0.375rem}.border-b{border-bottom-width:1px}.border-r{border-right-width:1px}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}.bg-lime-200{--tw-bg-opacity:1;background-color:rgb(217 249 157 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right, var(--tw-gradient-stops))}.from-lime-200{--tw-gradient-from:#d9f99d var(--tw-gradient-from-position);--tw-gradient-to:rgb(217 249 157 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-yellow-200{--tw-gradient-to:#fef08a var(--tw-gradient-to-position)}.fill-zinc-600{fill:#52525b}.stroke-zinc-600{stroke:#52525b}.p-1{padding:0.25rem}.p-2{padding:0.5rem}.p-3{padding:0.75rem}.text-\\[0px\\]{font-size:0px}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-bold{font-weight:700}.text-zinc-600{--tw-text-opacity:1;color:rgb(82 82 91 / var(--tw-text-opacity))}.opacity-0{opacity:0}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.duration-300{transition-duration:300ms}.duration-500{transition-duration:500ms}.group:hover .group-hover\\:-translate-y-\\[150\\%\\]{--tw-translate-y:-150%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\\:skew-y-0{--tw-skew-y:0deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\\:scale-\\[115\\%\\]{--tw-scale-x:115%;--tw-scale-y:115%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\\:gap-2{gap:0.5rem}.group:hover .group-hover\\:text-sm{font-size:0.875rem;line-height:1.25rem}.group:hover .group-hover\\:opacity-0{opacity:0}.group:hover .group-hover\\:opacity-100{opacity:1}.group:hover .group-hover\\:delay-500{transition-delay:500ms}.group:hover .group-hover\\:delay-700{transition-delay:700ms}"}]}},"actionData":null,"errors":null}