{"html":"

\n \n

\n 💡Get assistance with your questions!\n

\n","css":".tooltip-container {\n position: relative;\n display: inline-block;\n}\n\n.help-button {\n background: linear-gradient(135deg, #6366f1, #4f46e5);\n color: white;\n border: none;\n padding: 12px 24px;\n border-radius: 8px;\n cursor: pointer;\n font-size: 16px;\n font-weight: 600;\n transition:\n transform 0.2s ease,\n box-shadow 0.2s ease;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\n.help-button:hover,\n.help-button:focus {\n transform: translateY(-2px);\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);\n}\n\n.tooltip {\n position: absolute;\n bottom: calc(100% + 15px);\n left: 50%;\n transform: translateX(-50%) translateY(10px);\n padding: 12px 20px;\n background: linear-gradient(135deg, #ffffff, #f8f9fa);\n border-radius: 10px;\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);\n color: #1f2937;\n font-size: 14px;\n white-space: nowrap;\n opacity: 0;\n visibility: hidden;\n transition: all 0.3s ease;\n border: 1px solid rgba(229, 231, 235, 1);\n}\n\n/* Tooltip arrow */\n.tooltip::after {\n content: \"\";\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n border-width: 8px;\n border-style: solid;\n border-color: #ffffff transparent transparent transparent;\n}\n\n.tooltip-container:hover .tooltip,\n.help-button:focus + .tooltip {\n opacity: 1;\n visibility: visible;\n transform: translateX(-50%) translateY(0);\n}\n\n@keyframes glow {\n 0% {\n text-shadow: 0 0 10px rgba(99, 102, 241, 0.5);\n }\n 50% {\n text-shadow: 0 0 20px rgba(99, 102, 241, 0.7);\n }\n 100% {\n text-shadow: 0 0 10px rgba(99, 102, 241, 0.5);\n }\n}\n\n.tooltip strong {\n animation: glow 2s infinite;\n font-weight: 600;\n}\n\n.tooltip i {\n margin-right: 6px;\n color: #6366f1;\n}\n\n@media (max-width: 768px) {\n .tooltip {\n font-size: 13px;\n padding: 10px 16px;\n }\n\n .help-button {\n padding: 10px 20px;\n font-size: 14px;\n }\n}\n"}

fuzzy-otter-2

👁 实时预览

📝 源代码