Share
La información sobre herramientas es relativamente sencilla de implementar, simplemente agregando un poco de marcado a su HTML y empleando un poco de CSS. Sin embargo, si nunca ha oído hablar de los atributos de datos HTML5, es posible que desee revisar este enfoque alternativo (y mucho más limpio).
Si has estado siguiendo la serie de la Barra de administración, este screencast debería terminar bien las cosas. Si tu no tienen estado siguiendo a lo largo, no te preocupes; Este screencast te enseñará algo que puedes usar en todo tipo de situaciones. Vamos a ver un par de opciones para poner en marcha nuestras sugerencias de herramientas..
Si, por alguna loca razón, prefieres no verme demostrar cosas, a continuación hay un par de fragmentos para llevar y jugar. Nota: estos son ejemplos simplificados: es posible que desee agregar prefijos de navegador y estilos adicionales, etc..
El primer ejemplo utiliza un marcado adicional en forma de dentro de nuestro ancla. Funciona bien, nos permite agregar un "punto" decorativo a nuestra información sobre herramientas, y actualmente es la opción más segura en lo que respecta a la compatibilidad del navegador.
HTML:
Accentsconagua
Este es el enlaceeste es el consejo! CSS:
a.tooltip span font-size: 10px; posición: absoluta; índice z: 999; espacio en blanco: nowrap; abajo: 9999px; izquierda: 50%; fondo: # 000; color: # e0e0e0; relleno: 0px 7px; altura de línea: 24px; altura: 24px; opacidad: 0; transición: opacidad de 0,4 segundos; a.tooltip span :: before content: ""; bloqueo de pantalla; borde izquierdo: 6 px sólido # 000000; borde superior: 6px sólido transparente; posición: absoluta; arriba: -6px; izquierda: 0px; a.tooltip: hover span opacity: 1; abajo: -35px;
Aquí está el ejemplo que limpia nuestro marcado, usa el HTML5 atributo de datos para mantener el valor de nuestra información sobre herramientas, y el css ::antes de pseudo-elemento para mostrarlo. Mucho más ordenado.
HTML:
Este es el enlace
CSS:
a.tooltip :: before content: attr (data-tip); tamaño de fuente: 10px; posición: absoluta; índice z: 999; espacio en blanco: nowrap; abajo: 9999px; izquierda: 50%; fondo: # 000; color: # e0e0e0; relleno: 0px 7px; altura de línea: 24px; altura: 24px; opacidad: 0; transición: opacidad de 0,4 segundos; a.tooltip: hover :: before opacity: 1; abajo: -35px;
