{"html":"

\n Uiverse.io\n Tooltip\n \n

\n","css":"/* This is an example, feel free to delete this code */\n.tooltip-container {\n --background: #4132c9;\n --support-size: 50px;\n --tooltip-radius: 10px 10px 10px 0;\n --outline-border-color: #0096aa;\n position: relative;\n background: transparent;\n cursor: pointer;\n transition: all 0.2s;\n font-size: 17px;\n font-weight: bold;\n padding: 0.7em 1.8em;\n color: var(--background);\n border: solid 2px var(--background);\n}\n\n.tooltip-container::before {\n content: \"\";\n display: inline-block;\n border-radius: 50%;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: -1;\n transition: all 0.5s linear;\n outline: 3px solid transparent;\n background: var(--background);\n}\n.tooltip-container:hover {\n color: white;\n}\n.tooltip-container:hover:before {\n width: 100%;\n height: 100%;\n border-radius: 0;\n outline-offset: 5px;\n outline-color: var(--outline-border-color);\n}\n.tooltip {\n position: absolute;\n display: inline-block;\n top: 0;\n left: 50%;\n transform: translateX(-5%);\n padding: 0.3em 0.6em;\n opacity: 0;\n pointer-events: none;\n transition: all 0.3s;\n background: var(--background);\n border-radius: var(--tooltip-radius);\n color: white;\n box-shadow: 3px 3px 0px var(--outline-border-color);\n}\n\n.tooltip::after {\n content: \"Hello!👋\";\n display: inline-block;\n position: absolute;\n width: 100%;\n height: 100%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: var(--background);\n text-align: center;\n border-radius: var(--tooltip-radius);\n}\n.tooltip::before {\n position: absolute;\n content: \"\";\n bottom: 0;\n border-style: solid;\n border-width: 10px;\n left: 0;\n transform: translateX(-50%);\n border-color: transparent var(--background) var(--background) transparent;\n box-shadow: 0px 3px 0px var(--outline-border-color);\n}\n\n.tooltip-container:hover .tooltip::after {\n animation: hidden 0.5s 1.5s linear forwards;\n}\n\n.tooltip-container:hover .tooltip {\n top: calc(-100% - var(--support-size) * 0.5);\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n animation: shake 0.5s 1s linear;\n transition: all 0.3s 0.5s;\n}\n\n@keyframes hidden {\n 50% {\n transform: translate(-50%, -50%) scale(0.5);\n background-color: #1ca0f5;\n }\n 100% {\n transform: translate(0, -50%) scale(0.5);\n opacity: 0;\n }\n}\n\n@keyframes shake {\n 0%,\n 40%,\n 80% {\n transform: translateX(-10%);\n }\n 20%,\n 60%,\n 100% {\n transform: translateX(0);\n }\n}\n\n.st2 {\n fill: #f9c8a7;\n}\n.st3 {\n fill: #ff9e97;\n}\n.st6 {\n fill: #d72e48;\n}\n.st7 {\n fill: #ffffff;\n}\n.st8 {\n fill: #ff8d7f;\n}\n.st10 {\n fill: #3d3d3b;\n}\n.st11 {\n fill: #1ca0f5;\n}\n.st12 {\n opacity: 0.2;\n}\n.st14 {\n fill: #b7b7b7;\n}\n.st15 {\n fill: #ead9cf;\n}\n#Calque_1 {\n display: inline-block;\n height: var(--support-size);\n position: absolute;\n opacity: 0;\n transition: all 0.5s;\n z-index: -1;\n left: 0;\n top: 0;\n}\n#left_x5F_arm_2_ {\n transform: translateX(2px);\n}\n\n.tooltip-container:hover #Calque_1 {\n top: calc(var(--support-size) * -1);\n opacity: 1;\n}\n"}

spotty-jellyfish-36

👁 实时预览

📝 源代码