{"html":"

\n
\n \n \n \n Support\n
\n
\n
- \n \n \n \n \n 000-000-1111\n \n
- \n \n \n \n \n \n \n \n \n 8:30AM - 5PM PST\n \n
- \n \n \n \n \n uiverse.io\n \n
\n
\n

\n","css":".tooltip-wrapper {\n --clr-btn: rgb(2 22 36);\n --clr-dropdown: rgb(2 22 36);\n --clr-nav-hover: rgb(2 22 36);\n --clr-dropdown-hov: rgb(2 22 36);\n --clr-dropdown-link-hov: rgb(2 22 36);\n --clr-light: #ffffff;\n}\n.nav-link {\n position: relative;\n}\n.tooltip-wrapper > .tooltip-container {\n display: flex;\n justify-content: space-around;\n align-items: center;\n}\n.tooltip-container,\n.tooltip-menu-with-icon {\n list-style: none;\n}\n.nav-link > .tooltip-tab {\n color: var(--clr-light);\n background: var(--clr-btn);\n padding: 0.8rem 1rem;\n letter-spacing: 1px;\n font-size: 0.75rem;\n display: flex;\n align-items: center;\n column-gap: 12px;\n justify-content: space-between;\n text-transform: uppercase;\n cursor: pointer;\n border: 1px solid #00c1d5;\n transition: 0.3s ease-in-out;\n}\n.nav-link > .tooltip-tab:hover svg {\n transform: rotate(360deg);\n transition: 0.3s ease-in-out;\n}\n.tooltip-links {\n text-decoration: none;\n}\n.nav-link svg {\n fill: #fff;\n}\n.tooltip {\n position: absolute;\n top: 100%;\n left: 0;\n min-width: 12rem;\n max-width: 15rem;\n transform: translateY(10px);\n opacity: 0;\n pointer-events: none;\n transition: 0.5s;\n padding: 15px 0px 0px 0px;\n}\n.tooltip::after {\n content: \"\";\n width: 15px;\n height: 15px;\n background: #00c1d5 no-repeat -30px -50px fixed;\n top: 0px;\n left: 6%;\n position: absolute;\n display: inline-block;\n clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\n transform: rotate(360deg);\n z-index: -1;\n box-shadow: 0px 6px 30px rgb(2 22 36);\n}\n.tooltip .tooltip-menu-with-icon {\n padding: 10px 0px;\n background-color: var(--clr-dropdown);\n border: 1px solid #00c1d5;\n position: relative;\n}\n.tooltip-link {\n position: relative;\n}\n.tooltip-link:not(:nth-last-child(2)) {\n border-bottom: 1px solid var(--clr-dropdown);\n}\n.tooltip-link > a {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n column-gap: 10px;\n background-color: var(--clr-dropdown);\n color: var(--clr-light);\n padding: 0.5rem 1rem;\n font-size: 0.75rem;\n transition: 0.3s;\n}\n.tooltip-menu-with-icon svg {\n height: 20px;\n margin-left: 0px;\n}\n.nav-link:hover > .tooltip-tab {\n transform: scale(1.1);\n}\n.nav-link:hover > .tooltip,\n.tooltip-link:hover > .tooltip {\n transform: translate(0, 0);\n opacity: 1;\n pointer-events: auto;\n -webkit-transform: translate(0, 0);\n -moz-transform: translate(0, 0);\n -ms-transform: translate(0, 0);\n -o-transform: translate(0, 0);\n}\n.nav-link:hover > .tooltip-tab {\n transform: scale(1);\n background-color: var(--clr-nav-hover);\n}\n"}

proud-ladybug-47

👁 实时预览

📝 源代码