{"loaderData":{"0":null,"0-2":{"total":6509,"projects":[{"created":"2024-01-22T17:26:43.000Z","isPrivate":0,"projectId":"bc154d","snapshot":"https://s1.qingting.work/runjs/54f61948339f.png?x-oss-process=style/webp-w-500","tags":null,"title":"tooltip by MRez321","updated":"2024-01-22T19:26:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":117,"cssLen":1415,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Hey There!\n Tooltip\n

\n","css":".tooltip-container {\n --background: #7579e7;\n background: var(--background);\n position: relative;\n cursor: pointer;\n transition: all 0.2s;\n font-size: 17px;\n border-radius: 10px;\n width: 8em;\n\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.tooltip {\n position: absolute;\n top: 0;\n left: 30%;\n transform: translateX(-50%);\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: 5px;\n width: 7em;\n text-align: center;\n}\n\n.tooltip::before {\n position: absolute;\n content: \"\";\n height: 0.6em;\n width: 0.6em;\n bottom: -0.2em;\n left: 50%;\n transform: translate(-50%) rotate(45deg);\n background: var(--background);\n}\n\n.tooltip-container:hover .tooltip {\n top: -100%;\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n animation: shake 500ms ease-in-out forwards;\n}\n\n@keyframes shake {\n 0% {\n transform: rotate(2deg);\n }\n 50% {\n transform: rotate(-3deg);\n }\n 70% {\n transform: rotate(3deg);\n }\n\n 100% {\n transform: rotate(0deg);\n }\n}\n\n.text {\n position: relative;\n padding: 0.7em 1.8em;\n overflow: hidden;\n}\n\n.text::before {\n content: \"(^_^)/\";\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n padding: inherit;\n background-color: var(--background);\n transition: 0.3s;\n}\n\n.tooltip-container:hover .text::before {\n top: 0;\n}\n"},{"created":"2024-01-22T17:26:43.000Z","isPrivate":0,"projectId":"a81d36","snapshot":"https://s1.qingting.work/runjs/f08fcfa91bc4.png?x-oss-process=style/webp-w-500","tags":null,"title":"tooltip by neerajbaniwal","updated":"2024-01-22T19:26:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":111,"cssLen":2360,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Uiverse.io\n @\n

\n","css":".tooltip-container {\n height: 70px;\n width: 110px;\n border-radius: 5px;\n background-color: #fff;\n background-image: linear-gradient(\n to left bottom,\n #f2f5f8,\n #ecf1f2,\n #e7eceb,\n #e3e7e4,\n #e1e2de\n );\n border: 1px solid white;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.151);\n position: relative;\n transition: transform 0.3s ease;\n z-index: 1;\n}\n\n.tooltip-container::before {\n position: absolute;\n content: \"\";\n top: -50%;\n clip-path: polygon(50% 0, 0 100%, 100% 100%);\n border-radius: 5px;\n background-color: fff;\n background-image: linear-gradient(\n to left bottom,\n #1288ff,\n #e4eaec,\n #d8dfde,\n #cdd3cf,\n #c5c7c1\n );\n width: 100%;\n height: 50%;\n transform-style: preserve-3d;\n transform: perspective(1000px) rotateX(-150deg) translateY(-110%);\n transition: transform 0.3s ease;\n z-index: -1;\n}\n\n.tooltip-container .text {\n color: rgb(32, 30, 30);\n font-weight: bold;\n font-size: 40px;\n}\n\n.tooltip {\n position: absolute;\n top: -20px;\n opacity: 0;\n background: linear-gradient(-90deg, rgba(0, 0, 0, 0.05) 1px, white 1px),\n linear-gradient(rgba(0, 0, 0, 0.05) 1px, white 1px),\n linear-gradient(-90deg, rgba(0, 0, 0, 0.04) 1px, white 1px),\n linear-gradient(rgba(0, 0, 0, 0.04) 1px, white 1px),\n linear-gradient(white 3px, #f2f2f2 3px, #f2f2f2 78px, white 78px),\n linear-gradient(-90deg, #aaa 1px, white 1px),\n linear-gradient(-90deg, white 3px, #f2f2f2 3px, #f2f2f2 78px, white 78px),\n linear-gradient(#aaa 1px, white 1px), #f2f2f2;\n background-size: 4px 4px, 4px 4px, 80px 80px, 80px 80px, 80px 80px, 80px 80px,\n 80px 80px, 80px 80px;\n padding: 5px 10px;\n border: 1px solid rgb(206, 204, 204);\n\n height: 70px;\n width: 110px;\n border-radius: 5px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition-duration: 0.2s;\n pointer-events: none;\n letter-spacing: 0.5px;\n font-size: 18px;\n font-weight: 600;\n text-shadow: 10px salmon;\n z-index: ;\n}\n.tooltip-container:hover {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n}\n\n.tooltip-container:hover::before {\n transform: rotateY(0);\n background-image: none;\n background-color: white;\n}\n\n.tooltip-container:hover .tooltip {\n top: -90px;\n opacity: 1;\n transition-duration: 0.3s;\n}\n"},{"created":"2024-01-22T17:26:43.000Z","isPrivate":0,"projectId":"d96d2c","snapshot":"https://s1.qingting.work/runjs/0b7189dbca3c.png?x-oss-process=style/webp-w-500","tags":null,"title":"tooltip by EcheverriaJesus","updated":"2024-01-22T19:26:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1958,"cssLen":2271,"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{position:absolute}.flex{display:flex}.w-5{width:1.25rem}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-md{border-radius:0.375rem}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.from-gray-800{--tw-gradient-from:#1f2937 var(--tw-gradient-from-position);--tw-gradient-to:rgb(31 41 55 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-black{--tw-gradient-to:#000 var(--tw-gradient-to-position)}.p-2{padding:0.5rem}.font-semibold{font-weight:600}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.opacity-0{opacity:0}.drop-shadow-xl{--tw-drop-shadow:drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-500{transition-duration:500ms}.duration-700{transition-duration:700ms}.hover\\:translate-y-3:hover{--tw-translate-y:0.75rem;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))}.hover\\:rounded-\\[50\\%\\]:hover{border-radius:50%}.hover\\:from-\\[\\#331029\\]:hover{--tw-gradient-from:#331029 var(--tw-gradient-from-position);--tw-gradient-to:rgb(51 16 41 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.hover\\:to-\\[\\#310413\\]:hover{--tw-gradient-to:#310413 var(--tw-gradient-to-position)}.group:hover .group-hover\\:-translate-y-10{--tw-translate-y:-2.5rem;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\\:text-sm{font-size:0.875rem;line-height:1.25rem}.group:hover .group-hover\\:text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity))}.group:hover .group-hover\\:opacity-100{opacity:1}"},{"created":"2024-01-22T17:26:43.000Z","isPrivate":0,"projectId":"4027ef","snapshot":"https://s1.qingting.work/runjs/d2a27cdfc4f6.png?x-oss-process=style/webp-w-500","tags":null,"title":"tooltip by EcheverriaJesus","updated":"2024-01-22T19:26:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":782,"cssLen":1019,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n Information\n \n

\n","css":".absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.flex {\n display: flex;\n}\n.h-4 {\n height: 1rem;\n}\n.w-4 {\n width: 1rem;\n}\n.items-center {\n align-items: center;\n}\n.justify-center {\n justify-content: center;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.bg-gray-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(229 231 235 / var(--tw-bg-opacity));\n}\n.p-1 {\n padding: 0.25rem;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.opacity-0 {\n opacity: 0;\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-700 {\n transition-duration: 700ms;\n}\n.group:hover .group-hover\\:-translate-y-7 {\n --tw-translate-y: -1.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.group:hover .group-hover\\:opacity-100 {\n opacity: 1;\n}\n"},{"created":"2024-01-22T17:26:43.000Z","isPrivate":0,"projectId":"320973","snapshot":"https://s1.qingting.work/runjs/a561d9d37e33.png?x-oss-process=style/webp-w-500","tags":null,"title":"tooltip by SmookyDev","updated":"2024-01-22T19:26:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":114,"cssLen":869,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

This is a cool tooltip!

\n","css":".tooltip {\n position: relative;\n display: inline-block;\n cursor: pointer;\n font-family: \"Arial\", sans-serif;\n}\n\n.tooltip:hover .tooltiptext {\n visibility: visible;\n opacity: 1;\n}\n\n.tooltiptext {\n visibility: hidden;\n width: 200px;\n background-color: #333;\n color: #fff;\n text-align: center;\n border-radius: 5px;\n padding: 10px;\n position: absolute;\n z-index: 1;\n top: 125%;\n left: 50%;\n margin-left: -100px;\n opacity: 0;\n transition: opacity 0.3s;\n}\n\n.tooltiptext::after {\n content: \"\";\n position: absolute;\n top: -10px;\n left: 50%;\n margin-left: -10px;\n border-width: 10px;\n border-style: solid;\n border-color: transparent transparent #333 transparent;\n}\n\n.tooltip .icon {\n display: inline-block;\n width: 20px;\n height: 20px;\n background-color: #4caf50;\n color: #fff;\n border-radius: 50%;\n text-align: center;\n line-height: 20px;\n}\n"},{"created":"2024-01-22T17:26:43.000Z","isPrivate":0,"projectId":"f2f72a","snapshot":"https://s1.qingting.work/runjs/7fb52964d68f.png?x-oss-process=style/webp-w-500","tags":null,"title":"tooltip by vinodjangid07","updated":"2024-01-22T19:26:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":469,"cssLen":1093,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n 45k\n \n \n \n \n \n Follow\n

\n","css":".tooltip-container {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n transition: all 0.3s;\n background-color: rgb(255, 255, 255);\n padding: 11px 18px;\n border-radius: 12px;\n cursor: pointer;\n border: 1px solid rgb(211, 211, 211);\n}\n\n.text {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n font-size: 14px;\n font-weight: 600;\n color: rgb(0, 0, 0);\n}\n.svgIcon {\n width: 16px;\n height: auto;\n}\n.tooltip {\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n padding: 0.3em 0.6em;\n opacity: 0;\n pointer-events: none;\n transition: all 0.3s;\n background-color: rgb(255, 255, 255);\n border-radius: 12px;\n color: rgb(34, 34, 34);\n}\n\n.tooltip::before {\n position: absolute;\n content: \"\";\n height: 0.6em;\n width: 0.6em;\n bottom: -0.2em;\n left: 50%;\n transform: translate(-50%) rotate(45deg);\n background-color: rgb(255, 255, 255);\n}\n\n.tooltip-container:hover .tooltip {\n top: -100%;\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n}\n"},{"created":"2024-01-22T17:26:43.000Z","isPrivate":0,"projectId":"00594a","snapshot":"https://s1.qingting.work/runjs/af70f3d90b13.png?x-oss-process=style/webp-w-500","tags":null,"title":"tooltip by PriyanshuGupta28","updated":"2024-01-22T19:26:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":7768,"cssLen":1287,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n
Spotify
\n
\n \n \n \n
Pinterest
\n
\n \n \n \n
Dribbble
\n
\n \n \n \n
Telegram
\n

\n","css":"ul {\n list-style: none;\n}\n\n.example-1 {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.example-1 .icon-content {\n margin: 0 10px;\n position: relative;\n}\n.example-1 .icon-content .tooltip {\n position: absolute;\n top: -30px;\n left: 50%;\n transform: translateX(-50%);\n background-color: #000;\n color: #fff;\n padding: 6px 10px;\n border-radius: 5px;\n opacity: 0;\n visibility: hidden;\n font-size: 14px;\n transition: all 0.3s ease;\n}\n.example-1 .icon-content:hover .tooltip {\n opacity: 1;\n visibility: visible;\n top: -50px;\n}\n.example-1 .icon-content .link {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 50px;\n height: 50px;\n border-radius: 50%;\n color: #4d4d4d;\n background-color: #fff;\n transition: all 0.3s ease-in-out;\n}\n.example-1 .icon-content .link:hover {\n box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%);\n}\n.example-1 .icon-content .link svg {\n width: 30px;\n height: 30px;\n}\n.example-1 .icon-content .link[data-social=\"spotify\"]:hover {\n color: #1db954;\n}\n.example-1 .icon-content .link[data-social=\"pinterest\"]:hover {\n color: #bd081c;\n}\n.example-1 .icon-content .link[data-social=\"dribbble\"]:hover {\n color: #ea4c89;\n}\n.example-1 .icon-content .link[data-social=\"telegram\"]:hover {\n color: #0088cc;\n}\n"},{"created":"2024-01-22T17:26:43.000Z","isPrivate":0,"projectId":"d0e071","snapshot":"https://s1.qingting.work/runjs/fd9eb4d78470.png?x-oss-process=style/webp-w-500","tags":null,"title":"tooltip by JhaveLang","updated":"2024-01-22T19:26:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":117,"cssLen":1084,"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":"/* This is an example, feel free to delete this code */\n.tooltip-container {\n --background: linear-gradient(45deg, #22d3ee, #1f9df5);\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: 8px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n color: #fff;\n}\n\n.tooltip {\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translateX(-50%) scale(0.8);\n transform-origin: bottom;\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: 4px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.tooltip::before {\n position: absolute;\n content: \"\";\n height: 0.6em;\n width: 0.6em;\n bottom: -0.2em;\n left: 50%;\n transform: translate(-50%) rotate(45deg);\n background: var(--background);\n}\n\n.tooltip-container:hover .tooltip {\n top: -45px;\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n transform: translateX(-50%) scale(1);\n}\n.tooltip-container:hover {\n transform: scale(0.9);\n}\n"},{"created":"2024-01-22T17:22:25.000Z","isPrivate":0,"projectId":"8256a4","snapshot":"https://s1.qingting.work/runjs/77f61a6f133d.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by Javierrocadev","updated":"2024-01-22T19:24:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":192,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".container {\n width: 100%;\n height: 100%;\n /* Add your background pattern here */\n background-image: repeating-radial-gradient( #f8f1f1ee 88%,#963fdd 90%);\n background-size: 50px 50px;\n}"},{"created":"2024-01-22T17:22:25.000Z","isPrivate":0,"projectId":"a6bd65","snapshot":"https://s1.qingting.work/runjs/b7be60913d75.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by Yaya12085","updated":"2024-01-22T19:24:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":192,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".container {\n width: 100%;\n height: 100%;\n /* Add your background pattern here */\n background: repeating-radial-gradient(circle, #fff, #fff 5px, #000 6px);\n background-size: 50px 100px;\n}"},{"created":"2024-01-22T17:22:25.000Z","isPrivate":0,"projectId":"27fc6f","snapshot":"https://s1.qingting.work/runjs/a0504f301b2a.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by elijahgummer","updated":"2024-01-22T19:24:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":30,"cssLen":654,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".container {\n width: 100%;\n height: 100%;\n background: lightblue;\n position: relative;\n overflow: hidden;\n}\n\n.container::before {\n content: \"\";\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: radial-gradient(circle, #3498db 10%, transparent 20%),\n radial-gradient(circle, transparent 10%, #3498db 20%);\n background-size: 30px 30px; /* Adjust the size of the pattern */\n animation: moveBackground 8s linear infinite; /* Adjust the animation duration and timing function */\n}\n\n@keyframes moveBackground {\n 0% {\n transform: translate(0, 0);\n }\n 100% {\n transform: translate(20%, 20%);\n }\n}\n"},{"created":"2024-01-22T17:22:25.000Z","isPrivate":0,"projectId":"1a054c","snapshot":"https://s1.qingting.work/runjs/1528b6f8644a.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by theleaderofenemy","updated":"2024-01-22T19:24:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":30,"cssLen":557,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".container {\n width: 100%;\n height: 100%;\n --s: 60px;\n --c1: #6ca700;\n --c2: #406102;\n --_g: radial-gradient(\n 25% 25% at 25% 25%,\n var(--c1) 99%,\n rgba(0, 0, 0, 0) 101%\n );\n background: var(--_g) var(--s) var(--s) / calc(2 * var(--s))\n calc(2 * var(--s)),\n var(--_g) 0 0 / calc(2 * var(--s)) calc(2 * var(--s)),\n radial-gradient(50% 50%, var(--c2) 98%, rgba(0, 0, 0, 0)) 0 0 / var(--s)\n var(--s),\n repeating-conic-gradient(var(--c2) 0 50%, var(--c1) 0 100%)\n calc(0.5 * var(--s)) 0 / calc(2 * var(--s)) var(--s);\n}\n"}]}},"actionData":null,"errors":null}