{"loaderData":{"0":null,"0-2":{"total":7177,"projects":[{"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"},{"created":"2024-01-22T17:22:25.000Z","isPrivate":0,"projectId":"c91789","snapshot":"https://s1.qingting.work/runjs/fa7f9f449691.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by catraco","updated":"2024-01-22T19:24:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":30,"cssLen":228,"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: repeating-linear-gradient(\n 45deg,\n orange,\n orange 10px,\n orangered 10px,\n orangered 20px\n )\n orange;\n background-blend-mode: overlay;\n}\n"},{"created":"2024-01-22T17:22:25.000Z","isPrivate":0,"projectId":"3defef","snapshot":"https://s1.qingting.work/runjs/9faae6375b95.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by csemszepp","updated":"2024-01-22T19:24:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":30,"cssLen":795,"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: 140px; /* control the size */\n --c1: #ab3e5b;\n --c2: #ffbe40;\n\n --_g: #0000 25%, #0008 47%, var(--c1) 53% 147%, var(--c2) 153% 247%,\n var(--c1) 253% 347%, var(--c2) 353% 447%, var(--c1) 453% 547%, #0008 553%,\n #0000 575%;\n --_s: calc(25% / 3) calc(25% / 4) at 50%;\n background: radial-gradient(var(--_s) 100%, var(--_g)),\n radial-gradient(var(--_s) 100%, var(--_g)) calc(var(--s) / 2)\n calc(3 * var(--s) / 4),\n radial-gradient(var(--_s) 0, var(--_g)) calc(var(--s) / 2) 0,\n radial-gradient(var(--_s) 0, var(--_g)) 0 calc(3 * var(--s) / 4),\n repeating-linear-gradient(\n 90deg,\n #accec0 calc(25% / -6) calc(25% / 6),\n #61a6ab 0 calc(25% / 2)\n );\n background-size: var(--s) calc(3 * var(--s) / 2);\n}\n"},{"created":"2024-01-22T17:22:25.000Z","isPrivate":0,"projectId":"0a3f69","snapshot":"https://s1.qingting.work/runjs/172700f2d529.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by csemszepp","updated":"2024-01-22T19:24:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":30,"cssLen":389,"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 position: relative;\n background: #fff;\n filter: contrast(7);\n --mask: linear-gradient(red, rgba(0, 0, 0, 0.45));\n}\n\n.container::before {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background: radial-gradient(#000, transparent) 0 0/1em 1em space;\n -webkit-mask: var(--mask);\n mask: var(--mask);\n content: \"\";\n}\n"},{"created":"2024-01-22T17:22:25.000Z","isPrivate":0,"projectId":"2855b4","snapshot":"https://s1.qingting.work/runjs/b13c8b9705e1.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by Ratinax","updated":"2024-01-22T19:24:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":165,"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: linear-gradient(45deg,black, white);\n background-size: 1em 1em;\n}"}]}},"actionData":null,"errors":null}