{"html":"

\n \n ♡ Favorite\n \n

\n \n ↑ Share\n \n

\n \n ⚠ Delete\n \n

\n","css":"@import url(\"s://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap\");\n\n.tooltip-demo {\n font-family: \"Inter\", sans-serif;\n display: flex;\n gap: 20px;\n flex-wrap: wrap;\n justify-content: center;\n padding: 40px 20px;\n}\n\n.tip-wrap {\n position: relative;\n display: inline-block;\n}\n\n.tip-btn {\n font-family: \"Inter\", sans-serif;\n padding: 10px 22px;\n border-radius: 10px;\n border: 1px solid rgba(255, 255, 255, 0.222);\n background: rgba(255, 255, 255, 0.06);\n color: #a5a5a5;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition:\n background 0.2s ease,\n transform 0.2s ease;\n letter-spacing: 0.02em;\n}\n\n.tip-btn:hover {\n background: rgba(255, 255, 255, 0.1);\n transform: translateY(-1px);\n}\n\n.tip-btn--alt {\n color: #38bdf8;\n border-color: rgba(56, 189, 248, 0.25);\n}\n\n.tip-btn--warn {\n color: #f87171;\n border-color: rgba(248, 113, 113, 0.25);\n}\n\n/* Tooltip bubble */\n.tip-wrap::after {\n content: attr(data-tip-text, \"\");\n position: absolute;\n left: 50%;\n transform: translateX(-50%) translateY(0px);\n white-space: nowrap;\n padding: 7px 13px;\n border-radius: 8px;\n font-size: 12px;\n font-weight: 500;\n letter-spacing: 0.01em;\n pointer-events: none;\n opacity: 0;\n transition:\n opacity 0.25s ease,\n transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n z-index: 100;\n}\n\n/* Per-button tooltip via CSS custom tooltips */\n.tip-btn {\n position: relative;\n}\n\n/* Use a different approach — custom data attribute tooltip */\n.tip-wrap {\n --tooltip: attr(data-tip);\n}\n\n/* Actual tooltip */\n.tip-btn::before {\n content: attr(data-tip);\n position: absolute;\n left: 50%;\n transform: translateX(-50%) translateY(-8px) scale(0.85);\n bottom: calc(100% + 10px);\n white-space: nowrap;\n padding: 7px 14px;\n border-radius: 8px;\n background: linear-gradient(135deg, #1e293b, #0f172a);\n border: 1px solid rgba(255, 255, 255, 0.1);\n color: #f1f5f9;\n font-size: 12px;\n font-weight: 500;\n pointer-events: none;\n opacity: 0;\n transition:\n opacity 0.2s ease,\n transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);\n z-index: 100;\n backdrop-filter: blur(10px);\n}\n\n/* Arrow */\n.tip-btn::after {\n content: \"\";\n position: absolute;\n left: 50%;\n transform: translateX(-50%) translateY(-8px) scale(0.85);\n bottom: calc(100% + 4px);\n width: 0;\n height: 0;\n border-left: 6px solid transparent;\n border-right: 6px solid transparent;\n border-top: 6px solid #1e293b;\n pointer-events: none;\n opacity: 0;\n transition:\n opacity 0.2s ease,\n transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n z-index: 100;\n}\n\n.tip-btn:hover::before,\n.tip-btn:hover::after {\n opacity: 1;\n transform: translateX(-50%) translateY(0) scale(1);\n}\n\n/* Spectrum left highlight on tooltip */\n.tip-btn::before {\n border-left: 3px solid transparent;\n}\n\n.tip-btn:not(.tip-btn--alt):not(.tip-btn--warn)::before {\n border-left-color: #a78bfa;\n}\n\n.tip-btn--alt::before {\n border-left-color: #38bdf8;\n}\n\n.tip-btn--warn::before {\n border-left-color: #f87171;\n}\n"}

big-goose-52

👁 实时预览

📝 源代码