{"loaderData":{"0":null,"0-3":{"total":7263,"projects":[{"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}"},{"created":"2024-01-22T17:26:43.000Z","isPrivate":0,"projectId":"b9d06a","snapshot":"https://s1.qingting.work/runjs/34e151667de9.png?x-oss-process=style/webp-w-500","tags":null,"title":"tooltip by barisdogansutcu","updated":"2024-01-22T19:26:49.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":158,"cssLen":16606,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".brick {\n height: 2px;\n width: 2px;\n box-shadow: 2px 2px 0px #ff9999, 4px 2px 0px #ff9999, 6px 2px 0px #ff9999,\n 8px 2px 0px #ff9999, 10px 2px 0px #ff9999, 12px 2px 0px #ff9999,\n 14px 2px 0px #ff9999, 16px 2px 0px #ff9999, 18px 2px 0px #ff9999,\n 20px 2px 0px #ff9999, 22px 2px 0px #ff9999, 24px 2px 0px #ff9999,\n 26px 2px 0px #ff9999, 28px 2px 0px #ff9999, 30px 2px 0px #ff9999,\n 32px 2px 0px #ff9999, 2px 4px 0px #cc3300, 4px 4px 0px #cc3300,\n 6px 4px 0px #cc3300, 8px 4px 0px #cc3300, 10px 4px 0px #cc3300,\n 12px 4px 0px #cc3300, 14px 4px 0px #cc3300, 16px 4px 0px #000,\n 18px 4px 0px #cc3300, 20px 4px 0px #cc3300, 22px 4px 0px #cc3300,\n 24px 4px 0px #cc3300, 26px 4px 0px #cc3300, 28px 4px 0px #cc3300,\n 30px 4px 0px #cc3300, 32px 4px 0px #000, 2px 6px 0px #cc3300,\n 4px 6px 0px #cc3300, 6px 6px 0px #cc3300, 8px 6px 0px #cc3300,\n 10px 6px 0px #cc3300, 12px 6px 0px #cc3300, 14px 6px 0px #cc3300,\n 16px 6px 0px #000, 18px 6px 0px #cc3300, 20px 6px 0px #cc3300,\n 22px 6px 0px #cc3300, 24px 6px 0px #cc3300, 26px 6px 0px #cc3300,\n 28px 6px 0px #cc3300, 30px 6px 0px #cc3300, 32px 6px 0px #000,\n 2px 8px 0px #000, 4px 8px 0px #000, 6px 8px 0px #000, 8px 8px 0px #000,\n 10px 8px 0px #000, 12px 8px 0px #000, 14px 8px 0px #000, 16px 8px 0px #000,\n 18px 8px 0px #000, 20px 8px 0px #000, 22px 8px 0px #000, 24px 8px 0px #000,\n 26px 8px 0px #000, 28px 8px 0px #000, 30px 8px 0px #000, 32px 8px 0px #000,\n 2px 10px 0px #cc3300, 4px 10px 0px #cc3300, 6px 10px 0px #cc3300,\n 8px 10px 0px #000, 10px 10px 0px #cc3300, 12px 10px 0px #cc3300,\n 14px 10px 0px #cc3300, 16px 10px 0px #cc3300, 18px 10px 0px #cc3300,\n 20px 10px 0px #cc3300, 22px 10px 0px #cc3300, 24px 10px 0px #000,\n 26px 10px 0px #cc3300, 28px 10px 0px #cc3300, 30px 10px 0px #cc3300,\n 32px 10px 0px #cc3300, 2px 12px 0px #cc3300, 4px 12px 0px #cc3300,\n 6px 12px 0px #cc3300, 8px 12px 0px #000, 10px 12px 0px #cc3300,\n 12px 12px 0px #cc3300, 14px 12px 0px #cc3300, 16px 12px 0px #cc3300,\n 18px 12px 0px #cc3300, 20px 12px 0px #cc3300, 22px 12px 0px #cc3300,\n 24px 12px 0px #000, 26px 12px 0px #cc3300, 28px 12px 0px #cc3300,\n 30px 12px 0px #cc3300, 32px 12px 0px #cc3300, 2px 14px 0px #cc3300,\n 4px 14px 0px #cc3300, 6px 14px 0px #cc3300, 8px 14px 0px #000,\n 10px 14px 0px #cc3300, 12px 14px 0px #cc3300, 14px 14px 0px #cc3300,\n 16px 14px 0px #cc3300, 18px 14px 0px #cc3300, 20px 14px 0px #cc3300,\n 22px 14px 0px #cc3300, 24px 14px 0px #000, 26px 14px 0px #cc3300,\n 28px 14px 0px #cc3300, 30px 14px 0px #cc3300, 32px 14px 0px #cc3300,\n 2px 16px 0px #000, 4px 16px 0px #000, 6px 16px 0px #000, 8px 16px 0px #000,\n 10px 16px 0px #000, 12px 16px 0px #000, 14px 16px 0px #000,\n 16px 16px 0px #000, 18px 16px 0px #000, 20px 16px 0px #000,\n 22px 16px 0px #000, 24px 16px 0px #000, 26px 16px 0px #000,\n 28px 16px 0px #000, 30px 16px 0px #000, 32px 16px 0px #000,\n 2px 18px 0px #cc3300, 4px 18px 0px #cc3300, 6px 18px 0px #cc3300,\n 8px 18px 0px #cc3300, 10px 18px 0px #cc3300, 12px 18px 0px #cc3300,\n 14px 18px 0px #cc3300, 16px 18px 0px #000, 18px 18px 0px #cc3300,\n 20px 18px 0px #cc3300, 22px 18px 0px #cc3300, 24px 18px 0px #cc3300,\n 26px 18px 0px #cc3300, 28px 18px 0px #cc3300, 30px 18px 0px #cc3300,\n 32px 18px 0px #000, 2px 20px 0px #cc3300, 4px 20px 0px #cc3300,\n 6px 20px 0px #cc3300, 8px 20px 0px #cc3300, 10px 20px 0px #cc3300,\n 12px 20px 0px #cc3300, 14px 20px 0px #cc3300, 16px 20px 0px #000,\n 18px 20px 0px #cc3300, 20px 20px 0px #cc3300, 22px 20px 0px #cc3300,\n 24px 20px 0px #cc3300, 26px 20px 0px #cc3300, 28px 20px 0px #cc3300,\n 30px 20px 0px #cc3300, 32px 20px 0px #000, 2px 22px 0px #cc3300,\n 4px 22px 0px #cc3300, 6px 22px 0px #cc3300, 8px 22px 0px #cc3300,\n 10px 22px 0px #cc3300, 12px 22px 0px #cc3300, 14px 22px 0px #cc3300,\n 16px 22px 0px #000, 18px 22px 0px #cc3300, 20px 22px 0px #cc3300,\n 22px 22px 0px #cc3300, 24px 22px 0px #cc3300, 26px 22px 0px #cc3300,\n 28px 22px 0px #cc3300, 30px 22px 0px #cc3300, 32px 22px 0px #000,\n 2px 24px 0px #000, 4px 24px 0px #000, 6px 24px 0px #000, 8px 24px 0px #000,\n 10px 24px 0px #000, 12px 24px 0px #000, 14px 24px 0px #000,\n 16px 24px 0px #000, 18px 24px 0px #000, 20px 24px 0px #000,\n 22px 24px 0px #000, 24px 24px 0px #000, 26px 24px 0px #000,\n 28px 24px 0px #000, 30px 24px 0px #000, 32px 24px 0px #000,\n 2px 26px 0px #cc3300, 4px 26px 0px #cc3300, 6px 26px 0px #cc3300,\n 8px 26px 0px #000, 10px 26px 0px #cc3300, 12px 26px 0px #cc3300,\n 14px 26px 0px #cc3300, 16px 26px 0px #cc3300, 18px 26px 0px #cc3300,\n 20px 26px 0px #cc3300, 22px 26px 0px #cc3300, 24px 26px 0px #000,\n 26px 26px 0px #cc3300, 28px 26px 0px #cc3300, 30px 26px 0px #cc3300,\n 32px 26px 0px #cc3300, 2px 28px 0px #cc3300, 4px 28px 0px #cc3300,\n 6px 28px 0px #cc3300, 8px 28px 0px #000, 10px 28px 0px #cc3300,\n 12px 28px 0px #cc3300, 14px 28px 0px #cc3300, 16px 28px 0px #cc3300,\n 18px 28px 0px #cc3300, 20px 28px 0px #cc3300, 22px 28px 0px #cc3300,\n 24px 28px 0px #000, 26px 28px 0px #cc3300, 28px 28px 0px #cc3300,\n 30px 28px 0px #cc3300, 32px 28px 0px #cc3300, 2px 30px 0px #cc3300,\n 4px 30px 0px #cc3300, 6px 30px 0px #cc3300, 8px 30px 0px #000,\n 10px 30px 0px #cc3300, 12px 30px 0px #cc3300, 14px 30px 0px #cc3300,\n 16px 30px 0px #cc3300, 18px 30px 0px #cc3300, 20px 30px 0px #cc3300,\n 22px 30px 0px #cc3300, 24px 30px 0px #000, 26px 30px 0px #cc3300,\n 28px 30px 0px #cc3300, 30px 30px 0px #cc3300, 32px 30px 0px #cc3300,\n 2px 32px 0px #000, 4px 32px 0px #000, 6px 32px 0px #000, 8px 32px 0px #000,\n 10px 32px 0px #000, 12px 32px 0px #000, 14px 32px 0px #000,\n 16px 32px 0px #000, 18px 32px 0px #000, 20px 32px 0px #000,\n 22px 32px 0px #000, 24px 32px 0px #000, 26px 32px 0px #000,\n 28px 32px 0px #000, 30px 32px 0px #000, 32px 32px 0px #000;\n}\n.brick.one {\n transform: translateX(-60px);\n}\n.mush {\n height: 2px;\n width: 2px;\n box-shadow: 14px 2px 0px #fc9838, 16px 2px 0px #fc9838, 18px 2px 0px #fc9838,\n 20px 2px 0px #fc9838, 12px 4px 0px #fc9838, 14px 4px 0px #fc9838,\n 16px 4px 0px #fc9838, 18px 4px 0px #fc9838, 20px 4px 0px #d82800,\n 22px 4px 0px #d82800, 10px 6px 0px #fc9838, 12px 6px 0px #fc9838,\n 14px 6px 0px #fc9838, 16px 6px 0px #fc9838, 18px 6px 0px #d82800,\n 20px 6px 0px #d82800, 22px 6px 0px #d82800, 24px 6px 0px #d82800,\n 8px 8px 0px #fc9838, 10px 8px 0px #fc9838, 12px 8px 0px #fc9838,\n 14px 8px 0px #fc9838, 16px 8px 0px #fc9838, 18px 8px 0px #d82800,\n 20px 8px 0px #d82800, 22px 8px 0px #d82800, 24px 8px 0px #d82800,\n 26px 8px 0px #d82800, 6px 10px 0px #fc9838, 8px 10px 0px #fc9838,\n 10px 10px 0px #fc9838, 12px 10px 0px #fc9838, 14px 10px 0px #fc9838,\n 16px 10px 0px #fc9838, 18px 10px 0px #fc9838, 20px 10px 0px #d82800,\n 22px 10px 0px #d82800, 24px 10px 0px #d82800, 26px 10px 0px #fc9838,\n 28px 10px 0px #fc9838, 4px 12px 0px #fc9838, 6px 12px 0px #fc9838,\n 8px 12px 0px #d82800, 10px 12px 0px #d82800, 12px 12px 0px #d82800,\n 14px 12px 0px #fc9838, 16px 12px 0px #fc9838, 18px 12px 0px #fc9838,\n 20px 12px 0px #fc9838, 22px 12px 0px #fc9838, 24px 12px 0px #fc9838,\n 26px 12px 0px #fc9838, 28px 12px 0px #fc9838, 30px 12px 0px #fc9838,\n 4px 14px 0px #fc9838, 6px 14px 0px #d82800, 8px 14px 0px #d82800,\n 10px 14px 0px #d82800, 12px 14px 0px #d82800, 14px 14px 0px #d82800,\n 16px 14px 0px #fc9838, 18px 14px 0px #fc9838, 20px 14px 0px #fc9838,\n 22px 14px 0px #fc9838, 24px 14px 0px #fc9838, 26px 14px 0px #fc9838,\n 28px 14px 0px #fc9838, 30px 14px 0px #fc9838, 2px 16px 0px #fc9838,\n 4px 16px 0px #fc9838, 6px 16px 0px #d82800, 8px 16px 0px #d82800,\n 10px 16px 0px #d82800, 12px 16px 0px #d82800, 14px 16px 0px #d82800,\n 16px 16px 0px #fc9838, 18px 16px 0px #fc9838, 20px 16px 0px #fc9838,\n 22px 16px 0px #fc9838, 24px 16px 0px #fc9838, 26px 16px 0px #d82800,\n 28px 16px 0px #d82800, 30px 16px 0px #fc9838, 32px 16px 0px #fc9838,\n 2px 18px 0px #fc9838, 4px 18px 0px #fc9838, 6px 18px 0px #d82800,\n 8px 18px 0px #d82800, 10px 18px 0px #d82800, 12px 18px 0px #d82800,\n 14px 18px 0px #d82800, 16px 18px 0px #fc9838, 18px 18px 0px #fc9838,\n 20px 18px 0px #fc9838, 22px 18px 0px #fc9838, 24px 18px 0px #fc9838,\n 26px 18px 0px #d82800, 28px 18px 0px #d82800, 30px 18px 0px #d82800,\n 32px 18px 0px #fc9838, 2px 20px 0px #fc9838, 4px 20px 0px #fc9838,\n 6px 20px 0px #fc9838, 8px 20px 0px #d82800, 10px 20px 0px #d82800,\n 12px 20px 0px #d82800, 14px 20px 0px #fc9838, 16px 20px 0px #fc9838,\n 18px 20px 0px #fc9838, 20px 20px 0px #fc9838, 22px 20px 0px #fc9838,\n 24px 20px 0px #fc9838, 26px 20px 0px #fc9838, 28px 20px 0px #d82800,\n 30px 20px 0px #d82800, 32px 20px 0px #fc9838, 2px 22px 0px #fc9838,\n 4px 22px 0px #fc9838, 6px 22px 0px #fc9838, 8px 22px 0px #fc9838,\n 10px 22px 0px #fc9838, 12px 22px 0px #fc9838, 14px 22px 0px #fc9838,\n 16px 22px 0px #fc9838, 18px 22px 0px #fc9838, 20px 22px 0px #fc9838,\n 22px 22px 0px #fc9838, 24px 22px 0px #fc9838, 26px 22px 0px #fc9838,\n 28px 22px 0px #fc9838, 30px 22px 0px #fc9838, 32px 22px 0px #fc9838,\n 4px 24px 0px #fc9838, 6px 24px 0px #d82800, 8px 24px 0px #d82800,\n 10px 24px 0px #d82800, 12px 24px 0px #fff, 14px 24px 0px #fff,\n 16px 24px 0px #fff, 18px 24px 0px #fff, 20px 24px 0px #fff,\n 22px 24px 0px #fff, 24px 24px 0px #d82800, 26px 24px 0px #d82800,\n 28px 24px 0px #d82800, 30px 24px 0px #fc9838, 10px 26px 0px #fff,\n 12px 26px 0px #fff, 14px 26px 0px #fff, 16px 26px 0px #fff,\n 18px 26px 0px #fff, 20px 26px 0px #fff, 22px 26px 0px #fff,\n 24px 26px 0px #fff, 10px 28px 0px #fff, 12px 28px 0px #fff,\n 14px 28px 0px #fff, 16px 28px 0px #fff, 18px 28px 0px #fff,\n 20px 28px 0px #fff, 22px 28px 0px #fc9838, 24px 28px 0px #fff,\n 10px 30px 0px #fff, 12px 30px 0px #fff, 14px 30px 0px #fff,\n 16px 30px 0px #fff, 18px 30px 0px #fff, 20px 30px 0px #fff,\n 22px 30px 0px #fc9838, 24px 30px 0px #fff, 12px 32px 0px #fff,\n 14px 32px 0px #fff, 16px 32px 0px #fff, 18px 32px 0px #fff,\n 20px 32px 0px #fc9838, 22px 32px 0px #fff;\n transform: translate(-0px, -0px);\n z-index: -1;\n opacity: 0;\n}\n.box {\n position: absolute;\n background-color: rgba(46, 37, 37, 0);\n z-index: 3;\n width: 34px;\n height: 34px;\n}\n.box:hover + .mush {\n animation: mush 0.5s linear forwards;\n opacity: 1;\n}\n@keyframes mush {\n 0% {\n transform: scale(0.8) translate(-0px, -0px);\n }\n 50% {\n transform: scale(1.1) translate(-0px, -80px);\n }\n 100% {\n transform: scale(1.1) translate(-0px, -35px);\n }\n}\n.tooltip-mario-container {\n height: 2px;\n width: 2px;\n box-shadow: 4px 2px 0px #ce3100, 6px 2px 0px #ce3100, 8px 2px 0px #ce3100,\n 10px 2px 0px #ce3100, 12px 2px 0px #ce3100, 14px 2px 0px #ce3100,\n 16px 2px 0px #ce3100, 18px 2px 0px #ce3100, 20px 2px 0px #ce3100,\n 22px 2px 0px #ce3100, 24px 2px 0px #ce3100, 26px 2px 0px #ce3100,\n 28px 2px 0px #ce3100, 30px 2px 0px #ce3100, 2px 4px 0px #ce3100,\n 4px 4px 0px #ff9c31, 6px 4px 0px #ff9c31, 8px 4px 0px #ff9c31,\n 10px 4px 0px #ff9c31, 12px 4px 0px #ff9c31, 14px 4px 0px #ff9c31,\n 16px 4px 0px #ff9c31, 18px 4px 0px #ff9c31, 20px 4px 0px #ff9c31,\n 22px 4px 0px #ff9c31, 24px 4px 0px #ff9c31, 26px 4px 0px #ff9c31,\n 28px 4px 0px #ff9c31, 30px 4px 0px #ff9c31, 32px 4px 0px #000,\n 2px 6px 0px #ce3100, 4px 6px 0px #ff9c31, 6px 6px 0px #000,\n 8px 6px 0px #ff9c31, 10px 6px 0px #ff9c31, 12px 6px 0px #ff9c31,\n 14px 6px 0px #ff9c31, 16px 6px 0px #ff9c31, 18px 6px 0px #ff9c31,\n 20px 6px 0px #ff9c31, 22px 6px 0px #ff9c31, 24px 6px 0px #ff9c31,\n 26px 6px 0px #ff9c31, 28px 6px 0px #000, 30px 6px 0px #ff9c31,\n 32px 6px 0px #000, 2px 8px 0px #ce3100, 4px 8px 0px #ff9c31,\n 6px 8px 0px #ff9c31, 8px 8px 0px #ff9c31, 10px 8px 0px #ff9c31,\n 12px 8px 0px #ce3100, 14px 8px 0px #ce3100, 16px 8px 0px #ce3100,\n 18px 8px 0px #ce3100, 20px 8px 0px #ce3100, 22px 8px 0px #ff9c31,\n 24px 8px 0px #ff9c31, 26px 8px 0px #ff9c31, 28px 8px 0px #ff9c31,\n 30px 8px 0px #ff9c31, 32px 8px 0px #000, 2px 10px 0px #ce3100,\n 4px 10px 0px #ff9c31, 6px 10px 0px #ff9c31, 8px 10px 0px #ff9c31,\n 10px 10px 0px #ce3100, 12px 10px 0px #ce3100, 14px 10px 0px #000,\n 16px 10px 0px #000, 18px 10px 0px #000, 20px 10px 0px #ce3100,\n 22px 10px 0px #ce3100, 24px 10px 0px #ff9c31, 26px 10px 0px #ff9c31,\n 28px 10px 0px #ff9c31, 30px 10px 0px #ff9c31, 32px 10px 0px #000,\n 2px 12px 0px #ce3100, 4px 12px 0px #ff9c31, 6px 12px 0px #ff9c31,\n 8px 12px 0px #ff9c31, 10px 12px 0px #ce3100, 12px 12px 0px #ce3100,\n 14px 12px 0px #000, 16px 12px 0px #ff9c31, 18px 12px 0px #ff9c31,\n 20px 12px 0px #ce3100, 22px 12px 0px #ce3100, 24px 12px 0px #000,\n 26px 12px 0px #ff9c31, 28px 12px 0px #ff9c31, 30px 12px 0px #ff9c31,\n 32px 12px 0px #000, 2px 14px 0px #ce3100, 4px 14px 0px #ff9c31,\n 6px 14px 0px #ff9c31, 8px 14px 0px #ff9c31, 10px 14px 0px #ce3100,\n 12px 14px 0px #ce3100, 14px 14px 0px #000, 16px 14px 0px #ff9c31,\n 18px 14px 0px #ff9c31, 20px 14px 0px #ce3100, 22px 14px 0px #ce3100,\n 24px 14px 0px #000, 26px 14px 0px #ff9c31, 28px 14px 0px #ff9c31,\n 30px 14px 0px #ff9c31, 32px 14px 0px #000, 2px 16px 0px #ce3100,\n 4px 16px 0px #ff9c31, 6px 16px 0px #ff9c31, 8px 16px 0px #ff9c31,\n 10px 16px 0px #ff9c31, 12px 16px 0px #000, 14px 16px 0px #000,\n 16px 16px 0px #ff9c31, 18px 16px 0px #ce3100, 20px 16px 0px #ce3100,\n 22px 16px 0px #ce3100, 24px 16px 0px #000, 26px 16px 0px #ff9c31,\n 28px 16px 0px #ff9c31, 30px 16px 0px #ff9c31, 32px 16px 0px #000,\n 2px 18px 0px #ce3100, 4px 18px 0px #ff9c31, 6px 18px 0px #ff9c31,\n 8px 18px 0px #ff9c31, 10px 18px 0px #ff9c31, 12px 18px 0px #ff9c31,\n 14px 18px 0px #ff9c31, 16px 18px 0px #ce3100, 18px 18px 0px #ce3100,\n 20px 18px 0px #000, 22px 18px 0px #000, 24px 18px 0px #000,\n 26px 18px 0px #ff9c31, 28px 18px 0px #ff9c31, 30px 18px 0px #ff9c31,\n 32px 18px 0px #000, 2px 20px 0px #ce3100, 4px 20px 0px #ff9c31,\n 6px 20px 0px #ff9c31, 8px 20px 0px #ff9c31, 10px 20px 0px #ff9c31,\n 12px 20px 0px #ff9c31, 14px 20px 0px #ff9c31, 16px 20px 0px #ce3100,\n 18px 20px 0px #ce3100, 20px 20px 0px #000, 22px 20px 0px #ff9c31,\n 24px 20px 0px #ff9c31, 26px 20px 0px #ff9c31, 28px 20px 0px #ff9c31,\n 30px 20px 0px #ff9c31, 32px 20px 0px #000, 2px 22px 0px #ce3100,\n 4px 22px 0px #ff9c31, 6px 22px 0px #ff9c31, 8px 22px 0px #ff9c31,\n 10px 22px 0px #ff9c31, 12px 22px 0px #ff9c31, 14px 22px 0px #ff9c31,\n 16px 22px 0px #ff9c31, 18px 22px 0px #000, 20px 22px 0px #000,\n 22px 22px 0px #ff9c31, 24px 22px 0px #ff9c31, 26px 22px 0px #ff9c31,\n 28px 22px 0px #ff9c31, 30px 22px 0px #ff9c31, 32px 22px 0px #000,\n 2px 24px 0px #ce3100, 4px 24px 0px #ff9c31, 6px 24px 0px #ff9c31,\n 8px 24px 0px #ff9c31, 10px 24px 0px #ff9c31, 12px 24px 0px #ff9c31,\n 14px 24px 0px #ff9c31, 16px 24px 0px #ce3100, 18px 24px 0px #ce3100,\n 20px 24px 0px #ff9c31, 22px 24px 0px #ff9c31, 24px 24px 0px #ff9c31,\n 26px 24px 0px #ff9c31, 28px 24px 0px #ff9c31, 30px 24px 0px #ff9c31,\n 32px 24px 0px #000, 2px 26px 0px #ce3100, 4px 26px 0px #ff9c31,\n 6px 26px 0px #ff9c31, 8px 26px 0px #ff9c31, 10px 26px 0px #ff9c31,\n 12px 26px 0px #ff9c31, 14px 26px 0px #ff9c31, 16px 26px 0px #ce3100,\n 18px 26px 0px #ce3100, 20px 26px 0px #000, 22px 26px 0px #ff9c31,\n 24px 26px 0px #ff9c31, 26px 26px 0px #ff9c31, 28px 26px 0px #ff9c31,\n 30px 26px 0px #ff9c31, 32px 26px 0px #000, 2px 28px 0px #ce3100,\n 4px 28px 0px #ff9c31, 6px 28px 0px #000, 8px 28px 0px #ff9c31,\n 10px 28px 0px #ff9c31, 12px 28px 0px #ff9c31, 14px 28px 0px #ff9c31,\n 16px 28px 0px #ff9c31, 18px 28px 0px #000, 20px 28px 0px #000,\n 22px 28px 0px #ff9c31, 24px 28px 0px #ff9c31, 26px 28px 0px #ff9c31,\n 28px 28px 0px #000, 30px 28px 0px #ff9c31, 32px 28px 0px #000,\n 2px 30px 0px #ce3100, 4px 30px 0px #ff9c31, 6px 30px 0px #ff9c31,\n 8px 30px 0px #ff9c31, 10px 30px 0px #ff9c31, 12px 30px 0px #ff9c31,\n 14px 30px 0px #ff9c31, 16px 30px 0px #ff9c31, 18px 30px 0px #ff9c31,\n 20px 30px 0px #ff9c31, 22px 30px 0px #ff9c31, 24px 30px 0px #ff9c31,\n 26px 30px 0px #ff9c31, 28px 30px 0px #ff9c31, 30px 30px 0px #ff9c31,\n 32px 30px 0px #000, 2px 32px 0px #000, 4px 32px 0px #000, 6px 32px 0px #000,\n 8px 32px 0px #000, 10px 32px 0px #000, 12px 32px 0px #000,\n 14px 32px 0px #000, 16px 32px 0px #000, 18px 32px 0px #000,\n 20px 32px 0px #000, 22px 32px 0px #000, 24px 32px 0px #000,\n 26px 32px 0px #000, 28px 32px 0px #000, 30px 32px 0px #000,\n 32px 32px 0px #000;\n position: absolute;\n transform: translate(-30px);\n z-index: 3;\n}\n"},{"created":"2024-01-22T17:26:43.000Z","isPrivate":0,"projectId":"84c8d4","snapshot":"https://s1.qingting.work/runjs/942340643779.png?x-oss-process=style/webp-w-500","tags":null,"title":"tooltip by gharsh11032000","updated":"2024-01-22T19:26:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":145,"cssLen":2348,"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 Hello! 👋\n

\n","css":"/* This is an example, feel free to delete this code */\n.tooltip-container {\n --background: #333333;\n --color: #e8e8e8;\n position: relative;\n cursor: pointer;\n transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);\n font-size: 18px;\n font-weight: 600;\n color: var(--color);\n padding: 0.7em 1.8em;\n border-radius: 8px;\n text-transform: uppercase;\n height: 60px;\n width: 180px;\n display: grid;\n place-items: center;\n border: 2px solid var(--color);\n}\n\n.text {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: grid;\n place-items: center;\n transform-origin: -100%;\n transform: scale(1);\n transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.tooltip-container span:last-child {\n position: absolute;\n top: 0%;\n left: 100%;\n width: 100%;\n height: 100%;\n border-radius: 8px;\n opacity: 1;\n background-color: var(--background);\n z-index: -1;\n border: 2px solid var(--background);\n transform: scale(0);\n transform-origin: 0;\n transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);\n display: grid;\n place-items: center;\n}\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.4s cubic-bezier(0.23, 1, 0.32, 1);\n background: var(--background);\n z-index: -1;\n border-radius: 8px;\n scale: 0;\n transform-origin: 0 0;\n text-transform: capitalize;\n font-weight: 400;\n font-size: 16px;\n box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;\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 scale: 1;\n animation: shake 0.5s ease-in-out both;\n}\n\n.tooltip-container:hover {\n box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;\n color: white;\n border-color: transparent;\n}\n\n.tooltip-container:hover span:last-child {\n transform: scale(1);\n left: 0;\n}\n\n.tooltip-container:hover .text {\n opacity: 0;\n top: 0%;\n left: 100%;\n transform: scale(0);\n}\n\n@keyframes shake {\n 0% {\n rotate: 0;\n }\n\n 25% {\n rotate: 7deg;\n }\n\n 50% {\n rotate: -7deg;\n }\n\n 75% {\n rotate: 1deg;\n }\n\n 100% {\n rotate: 0;\n }\n}\n"},{"created":"2024-01-22T17:26:43.000Z","isPrivate":0,"projectId":"359e25","snapshot":"https://s1.qingting.work/runjs/8e41d5994710.png?x-oss-process=style/webp-w-500","tags":null,"title":"tooltip by SelfMadeSystem","updated":"2024-01-22T19:26:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":935,"cssLen":2804,"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} */\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:43.000Z","isPrivate":0,"projectId":"f3e299","snapshot":"https://s1.qingting.work/runjs/6ac2ddb7cc63.png?x-oss-process=style/webp-w-500","tags":null,"title":"tooltip by Tsiangana","updated":"2024-01-22T19:26:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1557,"cssLen":2323,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Discover\n \n

\n \n \n \n

\n \n

\n","css":"/* This is an example, feel free to delete this code */\n.tooltip-container {\n position: relative;\n background-color: #ff3cac;\n background-image: linear-gradient(\n 225deg,\n #ff3cac 0%,\n #784ba0 50%,\n #2b86c5 100%\n );\n cursor: pointer;\n transition: all 0.2s;\n font-size: 17px;\n /*padding: 0.7em 1.8em;*/\n width: 50px;\n height: 50px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n fill: #fff;\n box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.18);\n}\n.tooltip-container .borde-back {\n width: 60px;\n height: 60px;\n background-color: #e8e8e8;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n box-shadow: none;\n}\n\n.tooltip-container .icon {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10;\n background-color: #ff3cac;\n background-image: linear-gradient(\n 225deg,\n #ff3cac 0%,\n #784ba0 50%,\n #2b86c5 100%\n );\n cursor: pointer;\n}\n\n.tooltip {\n position: absolute;\n top: -2;\n left: -45px; /* Altere a posição inicial para a esquerda, fora da tela */\n transform: translateX(\n -32%\n ); /* Usando translateX para controlar a transição da esquerda para a direita */\n width: 160px;\n height: 52px;\n opacity: 0;\n pointer-events: none;\n transition: all 0.6s;\n border-radius: 50px;\n background-color: #ff3cac;\n background-image: linear-gradient(\n 225deg,\n #ff3cac 0%,\n #784ba0 50%,\n #2b86c5 100%\n );\n display: flex;\n align-items: center;\n justify-content: right;\n padding-right: 16px;\n color: #fff;\n font-size: 18px;\n font-family: sans-serif;\n font-weight: 800px;\n}\n\n.tooltip::before {\n position: absolute;\n content: \"\";\n height: 0.6em;\n width: 0.6em;\n right: -0.2em; /* Mude para a direita */\n top: 50%; /* Altere o topo para o meio da tooltip */\n transform: translateY(-50%) rotate(45deg); /* Use translateY para centralizar verticalmente */\n background: var(--background);\n}\n\n.tooltip-container:hover .tooltip {\n left: 100%; /* Altere para a posição desejada (a direita) */\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n z-index: -10;\n}\n.tooltip-container:hover {\n transform: translateX(-50px);\n transition: 0.5s linear;\n}\n"},{"created":"2024-01-22T17:26:43.000Z","isPrivate":0,"projectId":"ddf1d5","snapshot":"https://s1.qingting.work/runjs/bde3acb96d7c.png?x-oss-process=style/webp-w-500","tags":null,"title":"tooltip by TanimMahbub","updated":"2024-01-22T19:26:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1986,"cssLen":1889,"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

Tooltip using HTML custom data attribute & CSS content property

\n\n

\n \n \n \n \n \n \n Github\n \n

Tooltip using span tag

\n","css":".wrapper {\n display: flex;\n gap: 10px;\n font-family: monospace;\n}\n\n.wrapper > div {\n text-align: center;\n}\n\n.wrapper > div + div {\n border-inline-start: 1px solid #d6cfcf;\n padding-inline-start: 15px;\n}\n\n.wrapper > div > p {\n margin-top: 15px;\n max-width: 200px;\n}\n\n.wrapper a {\n display: inline-flex;\n width: 50px;\n height: 50px;\n border-radius: 100%;\n justify-content: center;\n align-items: center;\n background-color: #191919;\n color: #d5ad72;\n position: relative;\n}\n\n.data-tooltip::before,\n.data-tooltip::after {\n position: absolute;\n visibility: hidden;\n opacity: 0;\n transform: translateY(5px);\n transition: all 0.2s ease;\n}\n\n.data-tooltip::before {\n content: attr(data-tooltip-content);\n width: fit-content;\n font-size: small;\n font-weight: 600;\n background-color: inherit;\n padding: 3px 10px;\n border-radius: 4px;\n bottom: calc(100% + 5px);\n}\n\n.data-tooltip::after {\n content: \"\";\n border-top: 5px solid #191919;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n bottom: calc(100% + 1px);\n}\n\n.data-tooltip:hover::before,\n.data-tooltip:hover::after {\n visibility: visible;\n opacity: 1;\n transform: translateY(0);\n}\n\n.span-tooltip > i {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.span-tooltip > span {\n position: absolute;\n width: fit-content;\n font-size: small;\n font-weight: 600;\n background-color: inherit;\n padding: 3px 10px;\n border-radius: 4px;\n bottom: 100%;\n visibility: hidden;\n opacity: 0;\n transition: all 0.2s ease;\n}\n\n.span-tooltip > span::before {\n position: absolute;\n content: \"\";\n width: 10px;\n height: 10px;\n border-radius: 3px;\n background-color: inherit;\n transform: rotate(45deg);\n top: calc(100% - 6px);\n left: 40%;\n}\n\n.span-tooltip > i:hover + span {\n visibility: visible;\n opacity: 1;\n bottom: calc(100% + 6px);\n}\n"},{"created":"2024-01-22T17:26:43.000Z","isPrivate":0,"projectId":"cf8cef","snapshot":"https://s1.qingting.work/runjs/8c1013f70574.png?x-oss-process=style/webp-w-500","tags":null,"title":"tooltip by mRcOol7","updated":"2024-01-22T19:26:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1677,"cssLen":2920,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

User

@username

500+ Friends

\n \n

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

Facebook

\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: #3b5998;\n border-radius: 10px 15px;\n padding: 10px;\n border: 1px solid #29487d;\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.icon .layer {\n width: 55px;\n height: 55px;\n border: 3px solid #1877f2;\n border-radius: 50%;\n transition: transform 0.3s, border 0.3s ease, box-shadow 0.3s ease;\n box-shadow: 0 0 15px rgba(24, 119, 242, 0.7), 0 0 20px rgba(24, 119, 242, 0.5);\n}\n\n.icon:hover .layer {\n transform: rotate(-35deg) skew(20deg);\n box-shadow: 0 0 30px rgba(24, 119, 242, 1), 0 0 40px rgba(24, 119, 242, 0.7);\n}\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: 50%;\n transition: all 0.3s;\n}\n\n.layer span,\n.text {\n color: #1877f2;\n border-color: #1877f2;\n}\n\n.icon:hover .layer span {\n box-shadow: -1px 1px 3px #1877f2;\n}\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\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\n.icon:hover .layer span:nth-child(2) {\n opacity: 0.4;\n transform: translate(5px, -5px);\n}\n\n.icon:hover .layer span:nth-child(3) {\n opacity: 0.6;\n transform: translate(10px, -10px);\n}\n\n.icon:hover .layer span:nth-child(4) {\n opacity: 0.8;\n transform: translate(15px, -15px);\n}\n\n.icon:hover .layer span:nth-child(5) {\n opacity: 1;\n transform: translate(20px, -20px);\n}\n\n.facebookSVG {\n font-size: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #1877f2;\n border-radius: 50%;\n background: linear-gradient(\n 45deg,\n #1877f2 0%,\n #3b5998 25%,\n #1877f2 50%,\n #3b5998 75%,\n #1877f2 100%\n );\n}\n\n.user {\n display: flex;\n gap: 10px;\n}\n\n.img {\n width: 50px;\n height: 50px;\n font-size: 25px;\n font-weight: 700;\n border: 1px solid #1877f2;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #fff;\n}\n\n.name {\n font-size: 17px;\n font-weight: 700;\n color: #1877f2;\n}\n\n.details {\n display: flex;\n flex-direction: column;\n gap: 0;\n color: #fff;\n}\n\n.about {\n color: #ccc;\n padding-top: 5px;\n}\n"},{"created":"2024-01-22T17:26:43.000Z","isPrivate":0,"projectId":"0b54ee","snapshot":"https://s1.qingting.work/runjs/2e900c6884b2.png?x-oss-process=style/webp-w-500","tags":null,"title":"tooltip by vinodjangid07","updated":"2024-01-22T19:26:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1832,"cssLen":2862,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

User

@username

800+ Followers

\n \n

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

Instagram

\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 #52382f;\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: 15px;\n transition: all 0.3s;\n}\n\n.layer span,\n.text {\n color: #e6683c;\n border-color: #e6683c;\n}\n\n.icon:hover.layer span {\n box-shadow: -1px 1px 3px #e6683c;\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.instagramSVG {\n font-size: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: -webkit-linear-gradient(\n 45deg,\n #f09433 0%,\n #e6683c 25%,\n #dc2743 50%,\n #cc2366 75%,\n #bc1888 100%\n );\n background: linear-gradient(\n 45deg,\n #f09433 0%,\n #e6683c 25%,\n #dc2743 50%,\n #cc2366 75%,\n #bc1888 100%\n );\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );\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 #e6683c;\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: #e6683c;\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: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"}]}},"actionData":null,"errors":null}