Tooltip by Tsiangana
This tooltip was created for Tooltip Challenge
#e8e8e8
1/* This is an example, feel free to delete this code */ 2.tooltip-container { 3 position: relative; 4 background-color: #ff3cac; 5 background-image: linear-gradient( 6 225deg, 7 #ff3cac 0%, 8 #784ba0 50%, 9 #2b86c5 100% 10 ); 11 cursor: pointer; 12 transition: all 0.2s; 13 font-size: 17px; 14 /*padding: 0.7em 1.8em;*/ 15 width: 50px; 16 height: 50px; 17 border-radius: 50%; 18 display: flex; 19 align-items: center; 20 justify-content: center; 21 fill: #fff; 22 box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); 23 border: 1px solid rgba(255, 255, 255, 0.18); 24} 25.tooltip-container .borde-back { 26 width: 60px; 27 height: 60px; 28 background-color: #e8e8e8; 29 display: flex; 30 align-items: center; 31 justify-content: center; 32 border-radius: 50%; 33 box-shadow: none; 34} 35 36.tooltip-container .icon { 37 width: 50px; 38 height: 50px; 39 border-radius: 50%; 40 display: flex; 41 align-items: center; 42 justify-content: center; 43 z-index: 10; 44 background-color: #ff3cac; 45 background-image: linear-gradient( 46 225deg, 47 #ff3cac 0%, 48 #784ba0 50%, 49 #2b86c5 100% 50 ); 51 cursor: pointer; 52} 53 54.tooltip { 55 position: absolute; 56 top: -2; 57 left: -45px; /* Altere a posição inicial para a esquerda, fora da tela */ 58 transform: translateX( 59 -32% 60 ); /* Usando translateX para controlar a transição da esquerda para a direita */ 61 width: 160px; 62 height: 52px; 63 opacity: 0; 64 pointer-events: none; 65 transition: all 0.6s; 66 border-radius: 50px; 67 background-color: #ff3cac; 68 background-image: linear-gradient( 69 225deg, 70 #ff3cac 0%, 71 #784ba0 50%, 72 #2b86c5 100% 73 ); 74 display: flex; 75 align-items: center; 76 justify-content: right; 77 padding-right: 16px; 78 color: #fff; 79 font-size: 18px; 80 font-family: sans-serif; 81 font-weight: 800px; 82} 83 84.tooltip::before { 85 position: absolute; 86 content: ""; 87 height: 0.6em; 88 width: 0.6em; 89 right: -0.2em; /* Mude para a direita */ 90 top: 50%; /* Altere o topo para o meio da tooltip */ 91 transform: translateY(-50%) rotate(45deg); /* Use translateY para centralizar verticalmente */ 92 background: var(--background); 93} 94 95.tooltip-container:hover .tooltip { 96 left: 100%; /* Altere para a posição desejada (a direita) */ 97 opacity: 1; 98 visibility: visible; 99 pointer-events: auto; 100 z-index: -10; 101} 102.tooltip-container:hover { 103 transform: translateX(-50px); 104 transition: 0.5s linear; 105} 106
1.9K views
1.9K views
MIT License