Breaking

Post Top Ad

Your Ad Spot

viernes, 4 de octubre de 2019

Consejos de herramientas CSS (Infotips) para apoyar a los visitantes de su sitio web

La información sobre herramientas son mensajes que aparecen cuando coloca el cursor sobre una palabra, hipervínculo, imagen, icono o cualquier otro elemento en una interfaz gráfica de usuario (GUI) o sitio web.
También llamados "infotip" y a veces escritos como "información sobre herramientas", estos mensajes útiles aparecen en un cuadro de desplazamiento, generalmente para describir la función sobre la que se desplaza el mouse antes de hacer clic en él. Normalmente, estas sugerencias de herramientas solo aparecen en computadoras que usan un mouse, ya que los dispositivos móviles en su mayoría no tienen un cursor en su GUI.
Aquí hay un ejemplo de cómo se ve la información sobre herramientas:
HTML_tooltip
(Imagen de Nikola Smolenski )
Tradicionalmente, puede usar HTML simple para crear estas sugerencias de herramientas, como en el ejemplo anterior. Sin embargo, las sugerencias de herramientas CSS elevarán la cantidad de soporte que puede proporcionar a sus visitantes.
Con HTML básico, la información sobre herramientas aparece automáticamente sin animaciones ni posicionamiento. Usando CSS, usted tiene control sobre cómo se ven, dónde están posicionados e incluso si tendrán una flecha apuntando al elemento o no. En el siguiente ejemplo, hemos programado la información sobre herramientas para que aparezca debajo del texto de muestra, con un fondo negro y una flecha apuntando hacia arriba.
hover-example

Punta de herramienta básica

Al igual que con la mayoría de los trucos de CSS, deberá definir elementos tanto en la hoja de estilo (externa o dentro de la página web) como en el cuerpo de la página web.
Aquí hay una muestra de código para una información básica sobre herramientas:
<style>

/ * Contenedor de información sobre herramientas * /

.tooltip {

posición: relativa;

pantalla: bloque en línea;

borde inferior: 1px negro punteado; / * Si quieres puntos debajo del texto hoverable * /

}

/ * Texto de información sobre herramientas * /

.tooltip .tooltiptext {

visibilidad: oculta;

ancho: 120px;

color de fondo: negro;

color: #fff;

alinear texto: centro;

relleno: 5px 0;

radio de borde: 6px;

/ * Posicione el texto de información sobre herramientas - ¡vea los ejemplos a continuación! * /

posición: absoluta;

índice z: 1;

}

/ * Mostrar el texto de información sobre herramientas al pasar el mouse sobre el contenedor de información sobre herramientas * /

.tooltip: hover .tooltiptext {

visibilidad: visible;

}

</style>

<div class = "tooltip"> Desplázate sobre mí

<span class = "tooltiptext"> Texto de información sobre herramientas </span>

</div>
En el ejemplo anterior, hay dos partes en juego: la parte HTML y la parte CSS .
Para la parte HTML, debe crear un elemento contenedor como <div> y luego agregarle una clase, en este caso utilizamos " información sobre herramientas ".
Por separado, la información sobre herramientas en sí misma está dentro de un elemento en línea ( <span> en este ejemplo, con la clase " tooltiptext ").
Para la parte CSS, las clases que ha especificado en HTML se definen aquí. En este ejemplo, la clase de información sobre herramientas utiliza position: relative (que puede cambiar a position: absolute para definir dónde aparecería la información sobre herramientas).
También hemos usado la propiedad CSS3 border-radius para redondear las esquinas , creando un borde suave y agradable.
Por último, el selector : hover le dice a la página web que muestre la información sobre herramientas cuando el mouse se desplaza sobre la <div class = ”tooltip”> .

Colocación de la información sobre herramientas

Es fácil mover la posición de la punta de la herramienta usando CSS, hacia la izquierda o hacia la derecha, o hacia arriba y hacia abajo . Todo lo que necesita hacer es definirlos como en los códigos de ejemplo a continuación:

Posicionado a la derecha

.tooltip .tooltiptext {

arriba: -5px;

izquierda: 105%;

}

Posicionado a la izquierda

.tooltip .tooltiptext {

arriba: -5px;

derecha: 105%;

}

Posicionado en la parte superior

Use el margen izquierdo definiendo la mitad del ancho de la punta de la herramienta para centrar la punta de la herramienta. En este ejemplo, la mitad de 120px es 60, por lo que el margen izquierdo es -60px .
.tooltip .tooltiptext {

ancho: 120px;

parte inferior: 100%;

izquierda: 50%;

margen izquierdo: -60px;

}

Posicionado en la parte inferior

Puede centrar la punta de la herramienta de la misma manera que la punta de la herramienta de posicionamiento en la parte superior.
.tooltip .tooltiptext {

ancho: 120px;

Top 100%;

izquierda: 50%;

margen izquierdo: -60px;

}
Hay muchas otras cosas interesantes que puede incorporar en la información sobre herramientas, todas las cuales atraen más la atención y mejoran la experiencia del usuario de una manera que el HTML básico no puede. Una vez que aprenda otros elementos como bordes y animación (usando transición y opacidad), podrá hacer que la información sobre herramientas sea aún más atractiva. ¡Así que diviértete y sigue aprendiendo!

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas