{"loaderData":{"0":null,"0-2":{"total":6509,"projects":[{"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,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wgARCACOARwDAREAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAQFBgEDBwL/xAAYAQEBAQEBAAAAAAAAAAAAAAAAAgEDBP/aAAwDAQACEAMQAAAAonLzyEprcbIg6MSq8ntm40pixTNySW5LHpQABmBsbqNelTAAANCGRAiCugXdFnnWZaNyVJ0rZf2rkOyEI08Hjdye8xgtKruS4GzdYPbcBk6xIVPAFbZRiOYGDIyLEoRhgBJmxWunsmBqVhbgitV4TzGS04BTdny/VsmRE4qTbdokzlJVk7C2KshIldOeptJ0RSZBESVtnR1T9Jo9FWllkyYwFX3OXCWmCyZs0VZlrLg3JCNhipojy1nRh1WChlPLkWwAE8RVVUsjsytrAFBXk18miIK8mILWrntF5lol8RJ1PSJV2wJ6zOolq2gwcrGS9io4RpCjWL/2qm5kdznobQFAJwcQJIvBJG49UqhzwgMnebsBubfOi45qPNM6ClkOXwCrGskSaPZgepzsr+MY0FzLkc2J3W+V82vIslkhiDJei1K9O12Z7z1tihio81WTKy5ynqKtoGDBkBk9CknOiyXXvURznnBXZXsut0jKlZMwNEES6rEMUzTYzjczO7nT66Zsc1fmeeyqqenqaNJz9NnLOtgdI0TYDJZuzxNI826sb6NjVObF4kLEpzYa50e9KQzj10cI5c7ErqnR5xRebnJ08hhAZOcpBlt1LkoPLNYEhSxVSHM70xjoJ0DcAFebDW+gFebXh3oj4c3TQonGGtropKAAHFk6jJgyPG6cxVdWbtJQZHapnsMAAAvzah3oMLyWk/0IycpU+MrktSOlgAwHIdmPJoQFTySzev1UlWJcy46SlU/2ZwABEczQDvQY8SjuZzowQso6ZCf6IyScgMFuWTMJK50qJdm+y3t9DWlQw2S+1I9gAAQ3NC85xoPYGDYbBUMBN9WiUXApubO2UnKrJg1D7QGBnWSUs8a4qU7AAAxKsc58YwaSX6NHNHGAM4f6EsZlrxJ0numrFY5ZgD0bTQGPdJzpskerK8ysbJ9HqgDQGaJQ3GYws17H0jueaZFADcWPorfNqJWmKRkDGDNNw6MmnG6kv00DS/MlGv8ARuoA0BmuSPM90eNxeUDOaJAABJU1C0m6ISyZNxs1uHLbzTzeqSfWgDXKO5G+hqwDQGapJckj3GAzk1/maprE4JGDcedeCY2pWlP5z6DAGsjZJ0letABKK5N/Q9YBoDNUkuaStGSjxPJ1AB6xgwAYsHR62lcf/8QAQxAAAgECAgYGBwUGBQUBAAAAAQIDAAQFERASITFBUQYTICIycRQjUmGBkaEkM0Ji0RVDU4KxwURykqLhNDVUc/Bj/9oACAEBAAE/AVcq2pJsI51G0iSB4iQw3EVd4pLd2ywOigg948/0psBufRUmTJyVzKcRVvd3Ni+SkjLxI1WN9HfRZrsceJdIQmhGONSXFvDskljT3Mwp8asE/fZ+Smj0hsh/FP8ALQx+yPtj+Wo8VsZfDcp/NspWDAFSCDx59vUOVEa2w00DAZjb29wzO6psVs4Nhk1zyTbUnSH+FB8Wb+1ft++VtdCieS1a9LLRoB6Trxy8QqZisbis5pc1+/8AxEbvjWyNAq79FpiNzZ7I37nsHdUuJWN+mV3CYpeEibcqtLlrS5WVeG8cxQx/Dub63LV21J0kgH3Vu589lS9Ibt/AqR/U1NiF3P47h8uQOVZ1rAca6xeda6n8Vb6imlgbWikZDzBq26Q3EeydRKvyNWmJ2t5sjkyf2G2HSqZ79lBQOw0avvFNbn8Jzoqy7xpvMYht+5F6yT6Cri+uLo+skOr7I3dlpOWhcOumtxMsRKH51lkciNulu5MG4V1y++uv5LSdfOcoo2c8kXOosCxSf/DOoPtkLVlgD3M0sM0whmjPg1cyffQ6Jxcbp/8ATlT9E0Pgu2+KZ1L0Wu0+5mjf/aansr6y++gcLz3j50sw47KB5GrPHbm3Gq/r0HM7fnVxj13N93lEvu21HjOIR+G5b4gGrfpPMv8A1EKuvNdhqzv7a+TOCQE8VOwjRcYnZ2pIluEBHAbf6UmN4c51fScv8wIqOWOZNaN1deanPRcNBDGZJiEUcTWJYubgmO21kh5ne2hI3lcJGpZjwFW3R64k++YRD5mosAsk8evJ5t+lLhVioyFsn9au5cJtZzEbZWI9mgCxAG0nlVlg00rq841I/ZO80Ng2bBU1rBcfexK3v40+BWzbUZ1+OdXOCLBA8vpOxRn3l/vVpZrfXcUDSamufFvqHopYJ42ml+P6VDg+HQeC0i82Gt/WgoUZAAD3aMVsZHK3tpsuYv8AeOVWGIxXqZZ6kw8UZ39i+wGzvO8F6mU/iTZ9KvsNusMfv7UPhcbjSzBtjVvqyxNYU6i6t0ng4ZjvL5UcJsL9C+G3Gq38Jv8A7OpYLvDLlddWikB7rDj8aixe5xTqrFNWGR/HKOWXCrPCbSyGxNd+LuMzU2EWM/itkB5p3f6UejnVP1lndyxPS9Ibq0MkFwiTOhK6+ertFXd7PfSa8z58hwHlosMDmucnm9VH9TVtawWqasMYXmeJ0EgDNjkKxPHPFDaeRk/SorK8uF6yKF3UnfzrDJ7LrOrtbeXW4uwGz459i5uorWPXlbLkKtsPuMbcT3WtDZjwpxasRg/ZeMsIxsRg6eW+opFmiSRD3XAI7N9g9teMZNsU3tpRhxmw8D+lRD5/rVliMV2jaw6qRPvEc5atXePww92BetPtblpukV2dyQr8P+aHpWLXahmMjHidyirvovA8f2Z+rcD4Grqxu8Ob1yELwYeE/GlmB37PfSsQQykgjcRwpsVu3t2glcSxn21zy+NI7IwZWIKnMGrXpHbG1+05rMN4Vc9ap+lH/j23xf8AQVcY3f3GYM+oOUeyuOfGkRpZFRBmzHIedYdg0drlJN6yX6LpJyBPAVi2LNduYYjqwA/6qw7B9fKa5GXKP9aACqANg4AbKtraK1i1Il2c+JrdU1/awZ68y58htNHErm77ljbn/wBjjdVvhYD9fdv183v3Cra5TUWNjkffXSqx6yJL1BtTuv5c66PYmup6FMcsvuyePu7WeqCScgKxa6S8xF5YvBsUHn76wXCkxHXeZ21E2ZLvNLgGHr+6ZvNzSWsNqNWGMIp5aAgkzDAFeINX3ReyuczD6h/y7vl+lXeBYhY7dTrU9qPb9KE4/EKEiHjW8aIopJ3CRIztyUZmrDotPLk943VJ7A2t/wAVfYJA+GdTaRBJE7yH83vNYdfC8h73dnTY6neNOP3pihW2TxSeLyrBrAP9qkHdHgH99P7KnHgxGYDkc/1r9il/vryR/wD7zqHCLSHbqa7Di9ABRkAAOWmKbJTFKNaJhkQaxTo9LCxmsl663PAeJaW7xGLuCa4XhkWNa2Izfiu3/wBRrrLu1cHWmibhnmKw7pJl6u92/wD6Df8AEU2K2Cx6/pcRHINmflWKY29/nFF3IOXFqwXBNX7Vdp3vwR/rX/Y8WL/4K43/AJWoEEAg5jnzphmKVCaAyq+xW3se63flO6Nd9LBiuJ964l9EgP7tdjGocAw0DU9GV+bNvqfophTcJov8j/rWJdGltbPr7N3fU8SNt2fCsH9B9PC36ayNsUncp99Q28NuurDEka8lXLTieDekS+l2j9Td/R/Ov2vc2TdXiNoyt7S8aixqxk/fap5MMqnkOJYoSufrH1V8qjRYo1jQZKoyHbjiL791TqF1chognaJua8RSOJF1lOzRNEkitHKgZDwI2ViHRxs9ey3fw24eRpcExFjl6Pq+8sBWGYDFaESz5SzDdyWlQtVxBHcwtFKuanfX2/BMxqm5svqtQY9YTD73q25OKfGLBF1jdJ8NtS4rc4g5gwyI++ZuFWGERWfrH9dcHaZG/toiHezqbxCotqZVj+D+gz9fCv2d/wDaeVYBjoyWzu22jZG5/oexfSCQ9VkCo31jSWyWw7iiZj3SBlViZYJBdrCXjjPeqCeO5jDxNmNDTRIcmlQH3tUeO3K+NEf6VaY3Yyff60TfMfShKJ19RkU5jjSQAeL5aLg5uBy0wzNC2Y3cqR1kUMp2VKua56ETW8q1F5aHj25ikiOebVPhFhcktLaoSeI2H6VHgOFxnNbRfiSf600aRKqRoqLyUZCo11jWovLRNvFQ8angjuYXilXWRxkRWLYTLhk/tQMe4/8AY++sH6SdQqwXnej/AAycR+tQ3ENymvDIsi81NXM3VRbPEd1Xd/DaqTI+bncg3mi0+KXoz8TfJRUECW8CxJ4VFXGFKXMlrIbeQ+zuNeg4o/de8AT3MaXA7fL1ju78Tu0wXM1s+vDKyH8pq06TOvduotf8yb/lUWK2tyvqJAW5E5GjmTmdDyJGus7BR76R1kQOjBgdxFW8xhf8p305BiJB2EaIvD8e3NwqHedM3CovFodEnDwzKHjbgaxHoq6kvYnXX+E2/wCdSRXFlJk6SQuOeyjdXB2GeU+bmrfD7q6PdjOqfxtsH/NWNhHZR5L3nPibsyp1Urx556rEaCMt+lL66j8M7/OjiV4wyNw9W0E2IXIUszcWZtuQqONYo1jQZKoyGi3mJQxfLRDuPbl8PxqHefLTKO5UZykFHYtJtkFO4jQs24VK5lck8aEaDcqj4VKgWziOW0nf2r7Zf3H/ALG0XUP2K1uBuYarfCraA3M3VKQHIOWfE8qIIbVIyI2EctFph895tVco+LndVnZ2NvAIkzRuJO816DntSTMcKlgaIbWU+RpWKsCKNx7K1bk8eI7S3ZRikw3cRTSxundcVDvOlhmpFDeKlPd86iXIEmrqbrH1V8I0mMz2cYXeNtXEXUlRx1dvYzrFYJI76VijBGOw5aETrujZHGMk/X9CaikMUqSDepzrFMNa4Zbm2XNmy1hz99WWCKmT3Peb2BuFABRkoyA5aGuZCMgdVeQrfv0Qx5nWO4VH4x2r2LdIPjpzrWbma1m5mtY8z86MkmzNmr0iXV1dfZ2LKXYYz5ir45zAchpSNpDkozpLSNVybaalMdvF1YVWc786fD7R99unwGVRW8UEXVRpkh4b6SytY/DBH55Z9oDM5AbahsydsmwcqkUK2zdQ3jtEZjI1cQmF/wAp3VHFrbTsWpHU91QMudAFjkBmajstmcp+AqSaNO7Cg/zUSScydIORzrqxOuvH4vxLQJR89zCncyOWO86IVgVNeUgngKXLU2DIU11EjZFq46QMzlnlTRMvvHu0jIEZjMcqt1jl/cavnSqq+FQPLRMNx0A5qO1KoaM5ipw2oNXdxrLaBVvAIU2+LjU0jXEnUx55VKqq5VduXHsxyGJwwrVjuUDEb+NSLqSMvI6LSEH1r+EVcXZfupsXn2MieFCKQ7o2+VRx3C7Cnd99Mg/EtdRHyqONFcZDsS+DRGe4O1J4DS+IVqJra2qM6lVmiKocjUcJhgOrtfKmikXxIe1aS6j6h8LVdD7S1Imu4Ucanl1vVx+BfrpByOf9a65uGqP5RXpUw/F9BQvZRvCn4Ul8n41Ip5EkUarZ6F8Q7DDNToh3EdqTwGk8Y8+y9o3WHvKF86Ftbhci4J561G0iPgkp7SVNuxh7qy0SSGQgnllSPqBuZGVbzkKhstmcvypYkUZBRSnXUHmM+zuqOc56rbaHDtQ+LtSfdmk8Y89E14Ijq6uZqS7m5geVGV23ux+PYDEcTWeZ29i1hVEEh3t9KkvVT8JNftD8lf/EACgQAQACAQMEAgMAAwEBAAAAAAEAESExQVFhcYGhEJEgscHR8PHhMP/aAAgBAQABPxBcSqmlI8MdYdoqEBAjqtDuhVT2nt42fUR3NhIPNjpPeax1OSd6gXoX2mzV3gi0rxVTJuC6J8F3HvWybT2AftmvpOq/tVxirnFv3qaHZg2djPvz+NW1vELV4JojpL0043iI046P5KJQDKuKjDRf9Tp7uax2f4mfcr1uH+TbdRzO/wCfqJcAaNrZv3e0W0kFZ1lq3fWU60bN+HHiVOwoRoa7NXs3LbW1J7Jsz5VTpbRMT3mfpctDxz7Mepb3VrQfRRLcuescJNcXHRrDYHuwTQj5udWCoiJzZ/cw/Uoit/xd/Fz98JrNMRc1TiUyHn4ou6L+CNzkgbQHDhjmc8fG3HeOpGY/9t3oRy7wYvqTb4ca9t5T/p/7CtMndmra9Vmj3SnI5riKwAaiUzT4rvDWJGLdIqsAd4anmFC9DAxNxekW/UomaXWcMlk/lx/pmjzt/oky326ekma/2XpZ7uLwReojnqWO8wP0BUe0JI3GhsndIGHSntEZRmgn+9YykRl/eR/iZvRxNeoVzO4GDwX/ALqgQlt2UPkxGk5IH+spX/YnWgcHe4OkrXrrGA9gLXxvKd4//Mwfc0x1aD9JeYOor2wT1logkuAAu/qVj/L3OAINBQGKIemL1GHnWPvR4B7zKFh9KdNspS0oFNhdVyxW+8VPoCT6XWX3ZhQYKAUHwFh4JuqCAMRFBNaN/EvnXXMxsEaREKSk5JZbMUBeuhhPF9ZPRpyPRlJgduP/ACFZGesC6JA8nLeGlHVfWcPZHSySmuzcfcDYunDpwNFpupjOpil7cE18Gxa+dFwvb37Kh2fo1is4pl59dHB9G37mrWrwb/5hL37e2bd2UvCcncd5tFVRLVaA/kEFc7M6QxfDvbsSSkfvQL1ObNdfitt4nGNjKvAQfF7k2/F+K3QFOrmzMsWJfRJdy/lGjNMS8WRtQ876tfRYqpuQcm3a4st03RPfKw9O0NfdJoyEl1TjTtA6h4jl4tN8K+xFEXWnRMrNFo9jtAYhQEuo1X5gPiAdE/sNKJrzgVjPDNc7DwCQXT+0z4uKrS9V5lAwSWrTQXD6329o3es7/AIIBa8HLEU+Wru9OnEUthp0l/g6TFHlIoHaDqg1VKcrvFBagcsPFdq1HcLT6jDwrSP4/faBU6gu+1pp9QtQ8DoTvFv8zuWzsHWDNm7xwXamdefc3rTv+CcqJW6o3zBmAbHUx/gSmw5aBHOrtU17rf5WMz5muXzrPBL50UGx7kRv+f5/5iNpYvHrrqPqpWCjqaTRD2l9Q2hz/ItWafcA2jpuvhToukIWfX1R5G5QDwOQwtazxXwxKZlpjoeZWDUrmd6dGOvw4217Hsg89z/qiZ1QX609Q6caAoJbrvzL29QRBjMUOsWxoc8VbclPUGfURNh6vozL21213vf9iVNOAPCFz6pT+lbChL67PldiDQbqQ0HcOq7ES3EpFtc1AKIWDTyh1bkQzgIRoz/YRc67Wna+PMqF6O0HDvp1gdbRKomndIj+rEJ/Kiq7lDTcjo2siidGjkfTNxuUrdcazrvzvEHaJew30qhP00r9RafDA9nvvC6r6jUUDkA0NdpSIAOD8O+nEC9LfGnwxYo78x/CsfihXbqbdoMY9GpMIm0vSbd5eIZ5tame8x4Yfb5CD7c+4j7FjV4aqpQ68/7vBfHobjsnCQvHz9fi6mTtt6eyz3EzPRr+guCnmh6B0vT2xsZQ5RF1ym92X0iutRMEA0XSUsZBcM0qP4fL2O0fXavoyRofrn4D3OGCksWXIeFs1zdbVKnlkGllZ8N+SHFf7OiQ8/WYj4uK/wBzGBmqZfZj1DVYa5fsi/sgzPaMJ5SkXdbIAABRxAsNGfkat2yt5nYPU6xNYYbMPTER4xuqBmA9WABQARdyO0oQqtma1GhW80Z9Lv8A6TDo3QoeCCquDWAOD9QAKADpBm6R6YBRxHHTrdMy4f8AYTSkV+6Z29FNkMvuza7wGaaI/sPgZUC3U2OsJtRQez068wlnAzqrqvVmRrSXPAaRb1+uJ4C/uGO9Lf0v55Ou0X0eSV5D2+90MzgxpA8OXwV1jVYq5aqZvf6jIf3YQdTNix8zkGkZYgsDzN2a8bfkMOPDyfIw9sx0zkhWsswiJWQP+orROiwkOurFF9xxfclmEdv8iC69SjadH+CWW3Ka9Dp86aY7fCqWXPNNfFrBGh8bMrZltjbZowkDhoLT3HnoD9Qnxdg8pzKGAB0PhCd4uKy4z+ZaP4EufRlh6xCLsS7DvNKY33YD96KdjiI2pyAlIXEZyKS/xHkH2r8c3VjZSD9Et1QOgC/tTFSlWDK6y9ekYFE7EduWPx1nU3enSIKFNSY+4SbraGokQ6BLeY8Mbsx+KKNNOhLmCqq9pFdvNhpKrmlY+ewFx0zySqpuikkXJ0ilqDXV3+VACjLoVNEyho3bf4Ycy4wF6DZzpHGv+JvQB8WYFBadzojLoN2OWn8Mvqax7Dl7QwAlBhR4g1Rtxz0gApFGGKq1by5no3ZVBXujpncr8rQbZg9NpXZfg3D7n/Sn/SleC7aHUwtMsXaS8aH71/AtyLt35IAVOF+7nebbQ+vk8eYTV3WUnHmBPM9vP4aj0DlWtr11mdM8ivtzHP1X4aRAQrQNY+X6pue8IACgAR03Wa/iC6CVFFamcS+MzfMDpjwywyhNAgGF30K7sYo63Fvi4qQr8oQqxEuLFIc/1IGyTfaJHesmnwCaerXfvDUnRdVVR5mkVUuXd+augO7H7TgY01w8Pw0urLL8wJa03yHywWgeBUr4DQO8uHIfjtCgk1zFgLtgSyAytA6suFFlp2jwUdXnrEbphwU1/Fo8jnqStFBo1HiCA3gHp8LoBlL0Uid/JufhPg0Ce0p7F73hoh6mSKP2ks/9sqRMygKorj4Yb6x+Luhh/Ne8RYKno1D0Juw1A6VHeLNHlDH5Z1pK7MYXmn1/mM2y6vjlggxFRW6fr4oQDW0Vt+L/AIIaAn+3E0od7yiKEeTSVtdnwqTr+FT+F7H5rR/Lp/I5EXaIe2VFGCc0RFJe4eLplwAG7/kUNIj1xDDcNsECTepYAzR0uAgFq0BrLAycH+sC0Z0lA43EULaxx8V8C5CjAgIdq7fO0o9MSmuIqZyTb/4Dqmdla0RVlHp/zD76Qwy/jQy7MXalXd/DMJiE2Qtsx2J0e8//xAAeEQACAgMBAQEBAAAAAAAAAAAAAQIREBIgMEBQYP/aAAgBAgEBPwD8JF/iX/GsjAaF8d4r1iyS+RIURofrsUUV6xGOInWEMfqhMor1iMTscRCw/dCZLEYmoyjU1NSUSMTXEiOGhOhMk/gTJYiy8VmyTIsvEiOE7HEbE/euIdyRFFCRJEcRG8sXohoeYdKQ2RZYmSZHCJPKJZXlZYkNEOpc11REnlRK8aKEhoj3LKEuUJcLF5ssssZE1NREhC5RLFCXgkSWEN8ampqajI8SELlEhCRXgpDeb4s2NjYZHh4jyiREiy8N4ortRK7ZHh4jyiQhPN4svlCxZ//EABsRAAIDAAMAAAAAAAAAAAAAAAABERJQAmCA/9oACAEDAQE/AMJci+HHf4y2LDQxMWHUksWwoII8T//Z\");\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"},{"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"}]}},"actionData":null,"errors":null}