{"html":"

\n Discover\n \n

\n \n \n \n

\n \n

\n","css":"/* This is an example, feel free to delete this code */\n.tooltip-container {\n position: relative;\n background-color: #ff3cac;\n background-image: linear-gradient(\n 225deg,\n #ff3cac 0%,\n #784ba0 50%,\n #2b86c5 100%\n );\n cursor: pointer;\n transition: all 0.2s;\n font-size: 17px;\n /*padding: 0.7em 1.8em;*/\n width: 50px;\n height: 50px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n fill: #fff;\n box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.18);\n}\n.tooltip-container .borde-back {\n width: 60px;\n height: 60px;\n background-color: #e8e8e8;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n box-shadow: none;\n}\n\n.tooltip-container .icon {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10;\n background-color: #ff3cac;\n background-image: linear-gradient(\n 225deg,\n #ff3cac 0%,\n #784ba0 50%,\n #2b86c5 100%\n );\n cursor: pointer;\n}\n\n.tooltip {\n position: absolute;\n top: -2;\n left: -45px; /* Altere a posição inicial para a esquerda, fora da tela */\n transform: translateX(\n -32%\n ); /* Usando translateX para controlar a transição da esquerda para a direita */\n width: 160px;\n height: 52px;\n opacity: 0;\n pointer-events: none;\n transition: all 0.6s;\n border-radius: 50px;\n background-color: #ff3cac;\n background-image: linear-gradient(\n 225deg,\n #ff3cac 0%,\n #784ba0 50%,\n #2b86c5 100%\n );\n display: flex;\n align-items: center;\n justify-content: right;\n padding-right: 16px;\n color: #fff;\n font-size: 18px;\n font-family: sans-serif;\n font-weight: 800px;\n}\n\n.tooltip::before {\n position: absolute;\n content: \"\";\n height: 0.6em;\n width: 0.6em;\n right: -0.2em; /* Mude para a direita */\n top: 50%; /* Altere o topo para o meio da tooltip */\n transform: translateY(-50%) rotate(45deg); /* Use translateY para centralizar verticalmente */\n background: var(--background);\n}\n\n.tooltip-container:hover .tooltip {\n left: 100%; /* Altere para a posição desejada (a direita) */\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n z-index: -10;\n}\n.tooltip-container:hover {\n transform: translateX(-50px);\n transition: 0.5s linear;\n}\n"}

thin-cougar-23

👁 实时预览

📝 源代码

🔗 相关联的样式