53 lines
1.3 KiB
CSS
53 lines
1.3 KiB
CSS
/* ===============================
|
|
TOOLTIPS
|
|
=============================== */
|
|
|
|
|
|
|
|
/* Contenedor */
|
|
.tooltip {
|
|
position: relative;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Texto del tooltip */
|
|
.tooltip .tooltip-text {
|
|
visibility: hidden;
|
|
width: 220px;
|
|
background-color: #333;
|
|
color: #fff;
|
|
text-align: left; /* Alineado a la izquierda para mejor lectura */
|
|
border-radius: 6px;
|
|
padding: 12px;
|
|
position: absolute;
|
|
z-index: 1;
|
|
bottom: 125%;
|
|
|
|
/* CAMBIO CLAVE: Alineación a la derecha */
|
|
left: 0; /* Empieza desde el icono */
|
|
margin-left: 0; /* Eliminamos el margen negativo que lo sacaba de pantalla */
|
|
|
|
opacity: 0;
|
|
transition: opacity 0.3s;
|
|
font-size: 0.85rem;
|
|
line-height: 1.4;
|
|
box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
/* Ajuste de la flecha para que coincida con el icono a la izquierda */
|
|
.tooltip .tooltip-text::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 10px; /* La flecha ahora se queda cerca del inicio del cuadro */
|
|
border-width: 6px;
|
|
border-style: solid;
|
|
border-color: #333 transparent transparent transparent;
|
|
}
|
|
|
|
/* Mostrar al pasar el mouse */
|
|
.tooltip:hover .tooltip-text {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
} |