{"loaderData":{"0":null,"0-3":{"total":7437,"projects":[{"created":"2024-01-23T05:52:00.000Z","isPrivate":0,"projectId":"6c33c9","snapshot":"https://s1.qingting.work/runjs/094eaa768533.png?x-oss-process=style/webp-w-500","tags":null,"title":"Vue3 Template","updated":"2024-08-19T11:54:43.000Z","isTemplate":0,"htmlType":"html","pureCSS":0,"htmlLen":229,"cssLen":1089,"jsLen":105,"nickname":"泠","avatar":"https://thirdwx.qlogo.cn/mmopen/vi_32/SvWuVzh1vMf1x2jt7EiaJHCaMTNbe09TgBDrKiaGKS74l9DBhpUMJgIO5awKoYgpHbEv7jQBpQTgfzGgNhYVuTyYP8v1qmSjtqV4ccLz4g9yQ/132","username":"8c9374","editors":"1110"},{"created":"2024-01-23T03:26:53.000Z","isPrivate":0,"projectId":"4c8d69","snapshot":null,"tags":null,"title":"React antd Test","updated":"2024-01-23T03:43:45.000Z","isTemplate":0,"htmlType":"html","pureCSS":0,"htmlLen":20,"cssLen":0,"jsLen":4909,"nickname":"阿白","avatar":"https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM57Tg6dQ7jOq9McJSBGTbzNg51PkvC3b7ZAy9D75VF0SSyYUVXBBE26l6hNicIibAqmChgDajBK9EuQ/132","username":"af8411","editors":"1010"},{"created":"2024-01-23T03:23:20.000Z","isPrivate":0,"projectId":"005efe","snapshot":null,"tags":"react","title":"React 18 Functional Template","updated":"2024-01-23T03:25:32.000Z","isTemplate":0,"htmlType":"html","pureCSS":0,"htmlLen":20,"cssLen":328,"jsLen":424,"nickname":"阿白","avatar":"https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM57Tg6dQ7jOq9McJSBGTbzNg51PkvC3b7ZAy9D75VF0SSyYUVXBBE26l6hNicIibAqmChgDajBK9EuQ/132","username":"af8411","editors":"1110"},{"created":"2024-01-22T17:26:44.000Z","isPrivate":0,"projectId":"f5bcfe","snapshot":"https://s1.qingting.work/runjs/c53c9f7be40c.png?x-oss-process=style/webp-w-500","tags":null,"title":"tooltip by Yaya12085","updated":"2024-01-22T19:26:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":111,"cssLen":2318,"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}\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 #f2f5f8,\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}\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}\n.tooltip-container:hover {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n}\n\n.tooltip-container:hover::before {\n transform: rotateY(0);\n background-image: none;\n background-color: white;\n}\n\n.tooltip-container:hover .tooltip {\n top: -90px;\n opacity: 1;\n transition-duration: 0.3s;\n}\n"},{"created":"2024-01-22T17:26:44.000Z","isPrivate":0,"projectId":"50d5b1","snapshot":"https://s1.qingting.work/runjs/5c212588a81d.png?x-oss-process=style/webp-w-500","tags":null,"title":"tooltip by Lakshay-art","updated":"2024-01-22T19:26:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":284,"cssLen":11955,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Save Trees

\n\n

\n","css":"/* This is an example, feel free to delete this code */\n.tooltip-container {\n /* --background: #22d3ee; */\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 margin-bottom: -100px;\n}\n\n.bg {\n position: absolute;\n left: -30px;\n top: 0px;\n z-index: -2;\n}\n\n.tooltip {\n position: absolute;\n top: 0;\n left: 50%;\n width: 180px;\n height: 100px;\n transform: translateX(-50%);\n padding: 0.5em 1em;\n opacity: 0;\n pointer-events: none;\n transition: all 0.3s;\n background: url(\"data:image/jpeg;base64,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\");\n border-radius: 30px;\n background-size: cover;\n box-shadow: inset 0px 8px 9px #182218, 5px 8px 0px #314328;\n filter: drop-shadow(60px 60px 6px #18221888);\n border: 10px solid #3f5641ee;\n z-index: -1;\n animation: float 2s infinite;\n}\n\n.tooltip::before {\n position: absolute;\n content: \"\";\n height: 20px;\n width: 20px;\n bottom: -22px;\n left: 50%;\n transform: translate(-50%) rotate(45deg);\n background: #e9f6f4;\n border: 10px solid #3f5641ee;\n border-left: none;\n border-top: none;\n border-radius: 5px;\n box-shadow: 10px 4px 0px #314328;\n}\n\n.tooltip-container:hover .tooltip {\n top: -120px;\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n}\n\n.leaf1 {\n top: -30px;\n left: -60px;\n}\n.leaf2 {\n top: -30px;\n left: -60px;\n}\n.leaf3 {\n top: -30px;\n left: -60px;\n}\n.leaf4 {\n top: -30px;\n left: -60px;\n}\n.tooltip-container:hover .leaf1 {\n rotate: z 20deg;\n}\n/* .tooltip-container:hover .leaf2{\nrotate: z 20deg;\n} */\n.tooltip-container:hover .leaf3 {\n rotate: z -20deg;\n}\n.tooltip-container:hover .leaf4 {\n rotate: z 40deg;\n}\n\n.leaf {\n width: 60px;\n height: 40px;\n position: absolute;\n transform-origin: 100% 100%;\n transition: rotate 0.5s 0.2s linear;\n /* border: px solid #314328; */\n border-radius: 0 100%;\n background-image: linear-gradient(to right, #b4c7b3, #314328);\n}\n.icon {\n /* box-shadow: 60px 60px 6px #18221888,120px 60px 6px #18221888; */\n transform: translateX(-50%);\n filter: drop-shadow(60px 60px 6px #18221888);\n}\n.text {\n z-index: 2;\n font-size: 22px;\n color: #3f5641;\n font-weight: bolder;\n margin: auto;\n width: fit-content;\n padding-top: 25px;\n filter: drop-shadow(0px 0px 3px #fff);\n}\n@keyframes float {\n 0% {\n top: -120px;\n }\n 50% {\n top: -125px;\n }\n 100% {\n top: -120px;\n }\n}\n"},{"created":"2024-01-22T17:26:44.000Z","isPrivate":0,"projectId":"ce0ae9","snapshot":"https://s1.qingting.work/runjs/7461d4882b02.png?x-oss-process=style/webp-w-500","tags":null,"title":"tooltip by gouthamnetha02","updated":"2024-01-22T19:26:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":107,"cssLen":953,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

You Hovered Me!

\n","css":".tooltip {\n position: relative;\n display: inline-block;\n cursor: pointer;\n}\n\n.tooltip button {\n background-color: #db3434;\n color: #fff;\n border: none;\n padding: 10px 20px;\n border-radius: 5px;\n font-size: 16px;\n cursor: pointer;\n transition: background-color 0.3s, transform 0.2s ease-out;\n}\n\n.tooltip button:hover {\n background-color: #b92929;\n transform: scale(1.05);\n}\n\n.tooltip:hover .tooltiptext {\n visibility: visible;\n opacity: 1;\n}\n\n.tooltiptext {\n visibility: hidden;\n width: 160px;\n background-color: #333;\n color: #fff;\n text-align: center;\n border-radius: 8px;\n padding: 5px;\n position: absolute;\n z-index: 1;\n bottom: 125%;\n left: 50%;\n margin-left: -80px;\n opacity: 0;\n transition: opacity 0.3s;\n}\n\n.tooltiptext::after {\n content: \"\";\n position: absolute;\n top: 100%;\n left: 50%;\n margin-left: -5px;\n border-width: 5px;\n border-style: solid;\n border-color: #333 transparent transparent transparent;\n}\n"},{"created":"2024-01-22T17:26:44.000Z","isPrivate":0,"projectId":"77b38d","snapshot":"https://s1.qingting.work/runjs/cefe32a6f0dc.png?x-oss-process=style/webp-w-500","tags":null,"title":"tooltip by ayman-ashine","updated":"2024-01-22T19:26:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1783,"cssLen":2940,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Top\n

\n \n\n

\n Left\n

\n \n \n\n

\n Right\n

\n \n \n\n

\n Bottom\n

\n \n \n\n","css":".absolute{position:absolute}.relative{position:relative}.-bottom-2{bottom:-0.5rem}.-left-2{left:-0.5rem}.-right-2{right:-0.5rem}.-top-2{top:-0.5rem}.bottom-0{bottom:0px}.left-0{left:0px}.left-1\\/2{left:50%}.right-0{right:0px}.top-0{top:0px}.top-1\\/2{top:50%}.flex{display:flex}.hidden{display:none}.-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))}.-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))}.-translate-y-full{--tw-translate-y:-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-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))}.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))}.translate-y-full{--tw-translate-y: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))}.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))}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-2{gap:0.5rem}.whitespace-nowrap{white-space:nowrap}.rounded-full{border-radius:9999px}.rounded-md{border-radius:0.375rem}.bg-inherit{background-color:inherit}.bg-zinc-300{--tw-bg-opacity:1;background-color:rgb(212 212 216 / var(--tw-bg-opacity))}.bg-zinc-800{--tw-bg-opacity:1;background-color:rgb(39 39 42 / var(--tw-bg-opacity))}.p-1{padding:0.25rem}.p-2{padding:0.5rem}.text-zinc-400{--tw-text-opacity:1;color:rgb(161 161 170 / var(--tw-text-opacity))}.group:hover .group-hover\\:flex{display:flex}"},{"created":"2024-01-22T17:26:44.000Z","isPrivate":0,"projectId":"aada5d","snapshot":"https://s1.qingting.work/runjs/0fe676399bb2.png?x-oss-process=style/webp-w-500","tags":null,"title":"tooltip by SouravBandyopadhyay","updated":"2024-01-22T19:26:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":731,"cssLen":1936,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Add To Cart

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

\n","css":".button {\n --width: 100px;\n --height: 35px;\n --tooltip-height: 35px;\n --tooltip-width: 90px;\n --gap-between-tooltip-to-button: 18px;\n --button-color: #222;\n --tooltip-color: #fff;\n width: var(--width);\n height: var(--height);\n background: var(--button-color);\n position: relative;\n text-align: center;\n border-radius: 0.5em;\n font-family: \"Arial\";\n transition: background 0.7s;\n}\n\n.button::before {\n position: absolute;\n content: attr(data-tooltip);\n width: var(--tooltip-width);\n height: var(--tooltip-height);\n background-color: #555;\n font-size: 0.9rem;\n color: #fff;\n border-radius: 0.25em;\n line-height: var(--tooltip-height);\n bottom: calc(var(--height) + var(--gap-between-tooltip-to-button) + 10px);\n left: calc(50% - var(--tooltip-width) / 2);\n}\n\n.button::after {\n position: absolute;\n content: \"\";\n width: 0;\n height: 0;\n border: 10px solid transparent;\n border-top-color: #555;\n left: calc(50% - 10px);\n bottom: calc(100% + var(--gap-between-tooltip-to-button) - 10px);\n}\n\n.button::after,\n.button::before {\n opacity: 0;\n visibility: hidden;\n transition: all 0.5s;\n}\n\n.text {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.button-wrapper,\n.text,\n.icon {\n overflow: hidden;\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n color: #fff;\n}\n\n.text {\n top: 0;\n}\n\n.text,\n.icon {\n transition: top 0.5s;\n}\n\n.icon {\n color: #fff;\n top: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.icon svg {\n width: 24px;\n height: 24px;\n}\n\n.button:hover {\n background: #222;\n}\n\n.button:hover .text {\n top: -100%;\n}\n\n.button:hover .icon {\n top: 0;\n}\n\n.button:hover:before,\n.button:hover:after {\n opacity: 1;\n visibility: visible;\n}\n\n.button:hover:after {\n bottom: calc(var(--height) + var(--gap-between-tooltip-to-button) - 20px);\n}\n\n.button:hover:before {\n bottom: calc(var(--height) + var(--gap-between-tooltip-to-button));\n}\n"},{"created":"2024-01-22T17:26:44.000Z","isPrivate":0,"projectId":"1a1f3f","snapshot":"https://s1.qingting.work/runjs/e432e93d8832.png?x-oss-process=style/webp-w-500","tags":null,"title":"tooltip by PriyanshuGupta28","updated":"2024-01-22T19:26:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":7677,"cssLen":1917,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

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

\n","css":"ul {\n list-style: none;\n}\n\n.example-2 {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.example-2 .icon-content {\n margin: 0 10px;\n position: relative;\n}\n.example-2 .icon-content .tooltip {\n position: absolute;\n top: -30px;\n left: 50%;\n transform: translateX(-50%);\n color: #fff;\n padding: 6px 10px;\n border-radius: 5px;\n opacity: 0;\n visibility: hidden;\n font-size: 14px;\n transition: all 0.3s ease;\n}\n.example-2 .icon-content:hover .tooltip {\n opacity: 1;\n visibility: visible;\n top: -50px;\n}\n.example-2 .icon-content a {\n position: relative;\n overflow: hidden;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 50px;\n height: 50px;\n border-radius: 50%;\n color: #4d4d4d;\n background-color: #fff;\n transition: all 0.3s ease-in-out;\n}\n.example-2 .icon-content a:hover {\n box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%);\n}\n.example-2 .icon-content a svg {\n position: relative;\n z-index: 1;\n width: 30px;\n height: 30px;\n}\n.example-2 .icon-content a:hover {\n color: white;\n}\n.example-2 .icon-content a .filled {\n position: absolute;\n top: auto;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 0;\n background-color: #000;\n transition: all 0.3s ease-in-out;\n}\n.example-2 .icon-content a:hover .filled {\n height: 100%;\n}\n.example-2 .icon-content a[data-social=\"spotify\"] .filled,\n.example-2 .icon-content a[data-social=\"spotify\"] ~ .tooltip {\n background-color: #1db954;\n}\n.example-2 .icon-content a[data-social=\"pinterest\"] .filled,\n.example-2 .icon-content a[data-social=\"pinterest\"] ~ .tooltip {\n background-color: #bd081c;\n}\n.example-2 .icon-content a[data-social=\"dribbble\"] .filled,\n.example-2 .icon-content a[data-social=\"dribbble\"] ~ .tooltip {\n background-color: #ea4c89;\n}\n.example-2 .icon-content a[data-social=\"telegram\"] .filled,\n.example-2 .icon-content a[data-social=\"telegram\"] ~ .tooltip {\n background-color: #0088cc;\n}\n"},{"created":"2024-01-22T17:26:44.000Z","isPrivate":0,"projectId":"55631b","snapshot":"https://s1.qingting.work/runjs/2e57a1d7dc67.png?x-oss-process=style/webp-w-500","tags":null,"title":"tooltip by Ashe-T","updated":"2024-01-22T19:26:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1938,"cssLen":2490,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

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

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

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

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

\n Hover me\n

Hi there !

\n","css":".tooltip {\n position: relative;\n display: inline-block;\n cursor: pointer;\n background-color: #282828;\n color: #f1f1f1;\n padding: 1em 3em;\n border-radius: 1em;\n}\n\n.tooltip .tooltiptext {\n visibility: hidden;\n width: 200px;\n background-color: #28282817;\n color: #282828;\n text-align: center;\n border-radius: 5px;\n padding: 10px;\n position: absolute;\n z-index: 1;\n bottom: 125%;\n left: 50%;\n transform: translateX(-50%);\n opacity: 0;\n transition: opacity 0.3s;\n}\n\n.tooltip:hover .tooltiptext {\n visibility: visible;\n opacity: 1;\n}\n\n.tooltip .tooltiptext::after {\n content: \"\";\n position: absolute;\n top: 100%;\n left: 50%;\n border-width: 8px;\n border-style: solid;\n border-color: #28282817 transparent transparent transparent;\n transform: translateX(-50%);\n}\n"}]}},"actionData":null,"errors":null}