GERENCIA VIRTUAL

“Capacitación y asesoría a solo un click”

Tips de información
Un tip de información sobre un elemento a menudo se utiliza para especificar información
adicional acerca de algo cuando el usuario mueve el puntero del ratón sobre un elemento.

Crear un texto de ayuda que aparece cuando el usuario mueve el ratón sobre un elemento:

<style>
/* contenedor */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* si quieres punto sobre el area
sensitiva */
}
/* texto del tip*/
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* posición del tip! */
position: absolute;
z-index: 1;
}
/* muestre el texto del tip al posicionarse sobre el contenedor*/
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>

<div class="tooltip">Hover over me

<span class="tooltiptext">Texto del Tip</span>
</div>

Ver: Código 320.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Explicación del Ejemplo

En HTML: Utilice un elemento contenedor (como <div>) y añadir la clase "tooltip" a la
misma. Cuando posicione el puntero del ratón sobre este elemento <div>, se mostrará el texto de
sugerencia.
El texto de sugerencia se coloca dentro de un elemento en línea (como <span>) con la clase
class="tooltiptext".

En CSS: El uso de la clase tooltip y la position:relative, que es necesaria para colocar el

texto de sugerencia ( position:absolute).

Nota: Verán en los ejemplos posteriores sobre cómo posicionar el texto de ayuda.

La clase tooltiptext contiene el texto del tip de información real. Se oculta por defecto y será
visible al posicionar el puntero sobre el elemento). También hemos añadido algunos estilos
básicos como: ancho de 120 píxeles, color de fondo negro, color de texto blanco, texto centrado, y
la parte superior de 5px y relleno inferior.
La propiedad CSS border-radius se utiliza para agregar esquinas redondeadas para el tip de
información.
El selector :hover se utiliza para mostrar el tip de información cuando el usuario mueve el ratón
sobre el <div> con class="tooltip".

La Posición del Tip de Información

En este ejemplo, la información de herramienta se coloca a la derecha (left:105%) del texto
"sensible" (<div>). También tenga en cuenta que top:-5px se utiliza para colocarlo en el medio
de su elemento contenedor. Utilizamos el número 5 porque el texto de sugerencia tiene un
relleno superior e inferior de 5px. Si aumenta su relleno, también aumentará el valor de la
propiedad top, para asegurarse de que permanece en el medio (si esto es algo que desea). Lo
mismo se aplica si desea que el texto del tip de información esté situado a la izquierda.

/* muestre el tip de información a la derecha*/

.tooltip .tooltiptext {
top: -5px;
left: 105%;
}

Ver: Código 321.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

/* muestre el tip de información a la izquierda*/

.tooltip .tooltiptext {
top: -5px;
right: 105%;
}

Ver: Código 322.html

Si desea que aparezca el tip información en la parte superior o en la parte inferior, tome en cuenta
que utilizaremos la propiedad margin-left con un valor de menos de 60 píxeles. Esto es para
centrar la descripción encima ó debajo del texto sensible. Se establece en la mitad del ancho del
tip de información (120/2 = 60).

/* muestre el tip de información arriba*/

.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* Use la mitad del ancho (120/2 = 60), para centrar
el tip */
}

Ver: Código 323.html

/* muestre el tip de información abajo*/

.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* Use la mitad del ancho (120/2 = 60), para centrar
el tip */
}

Ver: Código 324.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Las Flechas Indicadoras del Tip

Para crear una flecha que debe aparecer en un lado específico del tip de información, hay que
agregar contenido "vacío" después del tip de información, con el pseudo-elemento
clase::after junto con la propiedad content . La flecha en sí se ha creado usando
bordes. Esto hará una vista sobre el tip de información como un bocadillo.

Este ejemplo muestra cómo agregar una flecha en la parte inferior de la descripción:

/* muestra la flecha abajo del tip de información */

.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%; /* Al final del tip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}

Ver: Código 325.html

Explicación del Ejemplo

Coloque la flecha dentro de la descripción. Mediante: top: 100% se coloca la flecha en la parte
inferior de la descripción, con left: 50% se centrará la flecha.

Nota: La propiedad border-width especifica el tamaño de la flecha. Si cambia esto, también

debe cambiar el valor margin-left a la misma. Esto mantendrá la flecha centrada.

El border-color se utiliza para transformar el contenido en una flecha. Hemos establecido el

borde superior de negro, y el resto a transparente. Si todos los lados fueran de color negro,
terminaríamos con una caja cuadrada negra.

Este ejemplo muestra cómo agregar una flecha en la parte superior de la descripción. Nótese que
establecemos el color del borde inferior de este tiempo:
 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

/* muestra la flecha arriba del tip de información */

.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* Arriba del tip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}

Ver: Código 326.html

Este ejemplo muestra cómo agregar una flecha a la izquierda de la descripción:

/* muestra la flecha a la izquierda del tip de información */

.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* izquierda del tip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}

Ver: Código 327.html

Este ejemplo muestra cómo agregar una flecha ala derecha de la descripción:

/* muestra la flecha a la derecha del tip de información */

.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* a la derecha del tip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}

Ver: Código 328.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Unir Tips (Animación)

Si desea hacer desaparecer el tip de información cuando está a punto de ser visible, se puede
utilizar la propiedad CSS transition junto con la propiedad opacity y pasar de ser
completamente invisible para el 100% visible, en un número de segundos especificado (1 segundo
en nuestra ejemplo):