{"loaderData":{"0":null,"0-3":{"total":7354,"projects":[{"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}"},{"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"}]}},"actionData":null,"errors":null}