HINT.css: información sobre herramientas en CSS3 puro y HTML5, no se necesita JavaScript

La información sobre herramientas en las páginas HTML en general no necesita ningún esfuerzo por parte del desarrollador, siempre que coloque los atributos de título adecuados para sus elementos. Luego, el título se usa para mostrar la información sobre herramientas, pero también para otras cosas, como proporcionar un lector de pantalla con el contenido adecuado. Hablando del caso de uso de la información sobre herramientas, la presentación visual depende del navegador con el que se visita su sitio. Los desarrolladores con la necesidad de un mayor control recurrieron a las soluciones basadas en JavaScript hace años. Kashagra Gour creó Hint.css, que demuestra ser una alternativa decente, basada completamente en CSS y HTML.

Hint.css: atributos de datos, transiciones CSS3, pseudoelementos y la propiedad de contenido

Hint.css permite información sobre herramientas relativamente simple pero elegante sobre cualquier elemento que pueda encontrar apropiado. Principalmente hablaremos de texto, enlaces e imágenes. Para que se muestre la información sobre herramientas, deberá agregar al menos dos clases consecutivas al elemento elegido. La primera clase siempre se llamará hint, activando la hoja de estilo inicialmente, mientras que el segundo define la posición o la apariencia visual de la información sobre herramientas. Puede agregar tantas clases como desee para lograr tantas combinaciones como sea posible. Si quisiera definir la posición y el color de la punta, simplemente agregaría tres clases, así:

    Oh man! You are gonna self-destruct in 5 sec.

Saldría así:

Utilizando hint pegamos Hint.css al elemento. La clase hint--top coloca la información sobre herramientas encima de la span y hint--error define las imágenes rojas. El siguiente atributo de datos data-hint lleva el texto que se mostrará (generalmente) al pasar el mouse.

Los atributos de datos de HTML5 son una posibilidad para inyectar datos aleatorios en un código fuente válido. Los datos dentro de los atributos de datos no se mostrarán al visitante y no influirán en el diseño. Sin embargo, están incluidos en la página y simplemente pueden ser leídos y procesados ​​por scripts y métodos especializados, por Hint.css en nuestro caso.

En su forma reciente, Hint.css tiene definiciones para hint--top, hint--bottom, hint--left y hint--right, utilizado para el posicionamiento de la información sobre herramientas. Además, hay definiciones de color para mensajes de estado comunes como hint--error, hint--info, hint--warning y hint--success. Si desea que su información sobre herramientas permanezca siempre visible, por lo que no es necesario que se active al pasar el mouse, deberá agregar la clase hint--always.

Como Hint.css representa CSS puro, los desarrolladores expertos pueden ampliar fácilmente el conjunto de funciones. Esto se aplica a los colores y otros aspectos visuales en primer lugar. Lo suficientemente hábil y lleno de un poco de fantasía, podrías empujar los límites aún más. Esto se ve favorecido por el hecho de que Hint.css se desarrolla en Sass, con las fuentes de Sass también disponibles. Hint.css se puede descargar desde Github bajo la licencia liberal MIT, que permite el uso en proyectos privados y comerciales.

Si no le gusta la información sobre herramientas, la hoja de estilo definitivamente es para usted de todos modos. Reducirlo a los aspectos educativos. Aprenderá mucho hurgando en la hoja de estilo. Hint.css es una recomendación del 100%. Lo que quizás quieras saber, antes de dejarte con tus propios dispositivos, es que las transiciones CSS en pseudo elementos solo funcionan en Firefox. Otros navegadores simplemente no muestran transiciones que no habría notado si no lo hubiera intentado en Firefox después de saberlo.

Enlaces relacionados:

• HINT.css: una biblioteca de información sobre herramientas en CSS | kushagragour.in/lab/hint
• HINT-Github-Repositorio | chinchang / sugerencia.css
• Enlace-Títulos | W3C