{"html":"\n Hover For Tooltip\n

\n \n

This is a fancy tooltip.

\n \n \n\n","css":".absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.-top-12 {\n top: -3rem;\n}\n.left-1\\/2 {\n left: 50%;\n}\n.z-50 {\n z-index: 50;\n}\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n.mr-2 {\n margin-right: 0.5rem;\n}\n.flex {\n display: flex;\n}\n.inline-flex {\n display: inline-flex;\n}\n.hidden {\n display: none;\n}\n.h-0 {\n height: 0px;\n}\n.w-fit {\n width: -moz-fit-content;\n width: fit-content;\n}\n.-translate-x-1\\/2 {\n --tw-translate-x: -50%;\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.flex-col {\n flex-direction: column;\n}\n.items-center {\n align-items: center;\n}\n.justify-center {\n justify-content: center;\n}\n.whitespace-nowrap {\n white-space: nowrap;\n}\n.rounded-lg {\n border-radius: 0.5rem;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.rounded-sm {\n border-radius: 0.125rem;\n}\n.border-l-8 {\n border-left-width: 8px;\n}\n.border-r-8 {\n border-right-width: 8px;\n}\n.border-t-8 {\n border-top-width: 8px;\n}\n.border-transparent {\n border-color: transparent;\n}\n.border-t-black {\n --tw-border-opacity: 1;\n border-top-color: rgb(0 0 0 / var(--tw-border-opacity));\n}\n.bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity));\n}\n.bg-purple-800 {\n --tw-bg-opacity: 1;\n background-color: rgb(107 33 168 / var(--tw-bg-opacity));\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.bg-gradient-to-br {\n background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));\n}\n.from-blue-500 {\n --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.to-green-500 {\n --tw-gradient-to: #22c55e var(--tw-gradient-to-position);\n}\n.p-0 {\n padding: 0px;\n}\n.p-0\\.5 {\n padding: 0.125rem;\n}\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n.px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.py-2\\.5 {\n padding-top: 0.625rem;\n padding-bottom: 0.625rem;\n}\n.text-center {\n text-align: center;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.font-medium {\n font-weight: 500;\n}\n.text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity));\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\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-75 {\n transition-duration: 75ms;\n}\n.ease-in {\n transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\n}\n.hover\\:text-white:hover {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.focus\\:ring-4:focus {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0\n var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0\n calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),\n var(--tw-shadow, 0 0 #0000);\n}\n.focus\\:ring-purple-200:focus {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(233 213 255 / var(--tw-ring-opacity));\n}\n.group:hover .group-hover\\:block {\n display: block;\n}\n.group:hover .group-hover\\:bg-opacity-0 {\n --tw-bg-opacity: 0;\n}\n.group:hover .group-hover\\:from-purple-500 {\n --tw-gradient-from: #a855f7 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.group:hover .group-hover\\:to-pink-500 {\n --tw-gradient-to: #ec4899 var(--tw-gradient-to-position);\n}\n@media (prefers-color-scheme: dark) {\n .dark\\:bg-gray-900 {\n --tw-bg-opacity: 1;\n background-color: rgb(17 24 39 / var(--tw-bg-opacity));\n }\n .dark\\:text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n }\n .dark\\:focus\\:ring-purple-800:focus {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(107 33 168 / var(--tw-ring-opacity));\n }\n}\n"}

wise-newt-71

👁 实时预览

📝 源代码