{"html":"

Tooltip using HTML custom data attribute & CSS content property

\n\n

Tooltip using span tag

\n","css":".wrapper {\n display: flex;\n gap: 10px;\n font-family: monospace;\n}\n\n.wrapper > div {\n text-align: center;\n}\n\n.wrapper > div + div {\n border-inline-start: 1px solid #d6cfcf;\n padding-inline-start: 15px;\n}\n\n.wrapper > div > p {\n margin-top: 15px;\n max-width: 200px;\n}\n\n.wrapper a {\n display: inline-flex;\n width: 50px;\n height: 50px;\n border-radius: 100%;\n justify-content: center;\n align-items: center;\n background-color: #191919;\n color: #d5ad72;\n position: relative;\n}\n\n.data-tooltip::before,\n.data-tooltip::after {\n position: absolute;\n visibility: hidden;\n opacity: 0;\n transform: translateY(5px);\n transition: all 0.2s ease;\n}\n\n.data-tooltip::before {\n content: attr(data-tooltip-content);\n width: fit-content;\n font-size: small;\n font-weight: 600;\n background-color: inherit;\n padding: 3px 10px;\n border-radius: 4px;\n bottom: calc(100% + 5px);\n}\n\n.data-tooltip::after {\n content: \"\";\n border-top: 5px solid #191919;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n bottom: calc(100% + 1px);\n}\n\n.data-tooltip:hover::before,\n.data-tooltip:hover::after {\n visibility: visible;\n opacity: 1;\n transform: translateY(0);\n}\n\n.span-tooltip > i {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.span-tooltip > span {\n position: absolute;\n width: fit-content;\n font-size: small;\n font-weight: 600;\n background-color: inherit;\n padding: 3px 10px;\n border-radius: 4px;\n bottom: 100%;\n visibility: hidden;\n opacity: 0;\n transition: all 0.2s ease;\n}\n\n.span-tooltip > span::before {\n position: absolute;\n content: \"\";\n width: 10px;\n height: 10px;\n border-radius: 3px;\n background-color: inherit;\n transform: rotate(45deg);\n top: calc(100% - 6px);\n left: 40%;\n}\n\n.span-tooltip > i:hover + span {\n visibility: visible;\n opacity: 1;\n bottom: calc(100% + 6px);\n}\n"}

white-fly-43

👁 实时预览

📝 源代码