Crear información de herramientas animadas con CSS puro/CSS3-Hint. CSS

Vista prévia

Descripción

HINT. CSS es una biblioteca de información sobre herramientas realizada en CSS/CSS3 puro que le permite crear información sobre herramientas/sugerencias de aspecto agradable y animado en su página web.

Características

• Ligero y fácil de usar.
• Animaciones basadas en transiciones y transformaciones CSS3.
• Totalmente personalizable a través de clases CSS.
• 4 direcciones: izquierda, derecha, arriba y derecha.
• 8 tipos adicionales de información sobre herramientas/sugerencia: error, ADVERTENCIA, información, éxito, siempre, redondeado, sin animación y rebote.

Funcionamiento

Incluya el Hint. CSS en la sección Head de su documento.

<link rel="stylesheet" href="hint.css">

Agregue un vínculo al elemento HTML. Utilice el atributo ' Data-Hint ' para el contenido de información y sugerencias. Utilice el atributo de clase para especificar la dirección y otros modificadores disponibles.

<a class="hint--top
hint--error" data-hint="This is an error tooltip">Hover me</a>

También puede utilizar el atributo ' Aria-Label ' en su lugar.

<a class="hint--top
hint--error" aria-label="This is an error tooltip">Hover me</a>

Todos los temas posibles.

• sugerencia – error
• Sugerencia – información
• sugerencia – ADVERTENCIA
• sugerencia – éxito

Cambie el tamaño de la información de herramientas.

• sugerencia – pequeña
• Sugerencia – medio
• sugerencia – gran

Más clases CSS para personalizar la información sobre herramientas

• sugerencia – siempre: Mostrar siempre
• sugerencia – redondeada: esquina redondeada
• sugerencia – no animado: sin animación
• sugerencia – Bounce: con animación de rebote

Registro de cambios

11/27/2018

• v2.5.1