Hay muchos tutoriales en línea que discuten la idea de información sobre herramientas basada en CSS. Sin embargo, muchos ejemplos requieren elementos HTML junto con el enlace de anclaje. Los visitantes pueden obtener un mensaje de información sobre herramientas básica utilizando el atributo de título predeterminado. Me gustaría seguir este método y actualizar el proceso un poco.
En este tutorial, quiero demostrar cómo construir información sobre herramientas CSS3 que se basan en un contexto HTML5. Usando diferentes clases podemos incorporar esquemas de color únicos junto con los efectos de transición CSS3. Esta técnica no requiere ningún HTML adicional a menos que adjunte la información sobre herramientas a un elemento diferente (como un campo de texto). ¡Empecemos!
Demo en vivo - Descargar código fuente
Empezando
La página en sí es bastante aburrida, así que quiero centrarme principalmente en el código CSS. Cada enlace de anclaje recibe una información sobre herramientas basada en la clase .tooltip. Usando la sintaxis de datos HTML5, estoy extrayendo el texto de un atributo llamado herramienta de datos.
Es mejor evitar el título atributo ya que esto mostrará otra información sobre herramientas basada en el navegador en la parte superior de la CSS. Podemos cambiar la dirección de cada información sobre herramientas con clases adicionales en el enlace de anclaje. Otra clase .animar También aplicará transiciones al efecto.
Mi idea original comenzó a partir de este tutorial que utiliza un bloque de código agrupado más grande. Desafortunadamente, el autor sugiere usar el texto alternativo para el título de la información sobre herramientas, pero no se permite que se coloque en los enlaces de anclaje. Por lo tanto, he revisado los consejos y actualizado para limpiar el código HTML5 / CSS3.
Construyendo el Tooltip
El mejor lugar para comenzar es revisar el código genérico antes de que aparezca algo en la página. Los enlaces de anclaje pueden usar :después y :antes de pseudo-elementos a aplicar utilizando CSS. Esto permite a los desarrolladores personalizar un poco de contenido antes y después de cualquier elemento aplicable. En este caso, crearé una descripción de triángulo junto con un cuadro de burbuja separado.
El enlace de anclaje en sí está colocado relativamente, de modo que los pseudo-elementos pueden aplicarse utilizando posicionamiento absoluto. Esto hace que sea más fácil encajar la burbuja y el triángulo en una información sobre herramientas. visibilidad: oculta mantendrá la sugerencia fuera de la vista del usuario hasta que específicamente coloque un enlace. De lo contrario, la información sobre herramientas es transitable, pero con una opacidad del 0%.
Notarás que el fondo predeterminado utiliza un translúcido. rgba () ajuste. : antes contiene el código del triángulo mientras que: después contiene la burbuja de información sobre herramientas y el texto con la propiedad contenido: attr (herramienta de datos).
Notará que en la parte inferior de mi ejemplo de código, actualizamos la posición cada vez que un usuario se desplaza al enlace de anclaje. Esta posición cambiará para cada ubicación de información sobre herramientas por separado junto con los estilos de borde para la flecha.
Clases de posición
Puede aplicar una clase adicional en el enlace de anclaje para forzar una determinada ubicación de información sobre herramientas. El valor predeterminado aparece encima del texto y las otras clases son .Correcto, .izquierday .fondo.
La posición inferior utiliza píxeles junto con la posición superior predeterminada. Pero también quería demostrar cómo aplicar estilos usando porcentajes en la información sobre herramientas izquierda / derecha.Es mejor seguir con una unidad que sea similar a tu texto de párrafo para que todo se mantenga en proporción.
Los porcentajes a menudo son necesarios para el posicionamiento horizontal, ya que no siempre sabemos el ancho de píxel de un enlace. Los ems escalables son otra opción cuando se trata de fuentes, pero el posicionamiento puede ser complicado.
Los únicos otros cambios aparte de la posición son los anchos de los bordes y los colores. Esto se aplica en el :antes de elemento porque está apuntando a cada triángulo. La posición determina cómo se ve el triángulo y qué lado de la burbuja debe aparecer.
Estilos CSS extra
Los dos fragmentos de clase adicionales son para recolorear información sobre herramientas y usar efectos animados en la pantalla.
Los códigos de clase de color son muy simples pero también densos y repetitivos. Este bloque de código es para una sola paleta de colores de azul. La información sobre herramientas :después El selector solo es necesario una vez para actualizar el fondo de la burbuja. Necesitamos 4 selectores que apuntan a cada flecha en relación con las 4 posiciones de la información sobre herramientas.
Los colores deben aplicarse en diferentes bordes para diferentes posiciones de triángulos. Por suerte, es muy simple copiar / pegar y actualizar con su propia combinación de colores.
Dado que la burbuja de herramientas y el triángulo se pueden animar juntos, he escrito un selector para ambos. Utilizan el mismo estilo de animación para mantener todo fluido. Todo lo que necesitas hacer es agregar el .animar clase en cualquier enlace de anclaje de información sobre herramientas.
Adjuntar a otros elementos
La última parte de este tutorial explica cómo utilizar estas informaciones sobre herramientas para elementos que no tienen ningún pseudo soporte antes / después. El selector de hermanos adyacente es importante en relación con la información sobre herramientas: siéntase libre de cambiar este código si necesita apuntar a elementos más específicos.
Notarás que la mayoría de las propiedades se ven muy similares a las anteriores. Todavía extraemos contenido de la herramienta de datos y las sugerencias aparecen solo cuando un usuario se enfoca en un campo de entrada. los .fieldtip La clase se puede agregar a cualquier elemento. He elegido un tramo como verás en mi HTML:
También con estas informaciones sobre herramientas externas he mantenido adjuntas las propiedades de animación. Puede intentar cambiar las cosas con un color diferente, tamaño de fuente o cualquier número de propiedades CSS adicionales.
Demo en vivo - Descargar código fuente
Clausura
Creo que estas informaciones sobre herramientas proporcionan una excelente plantilla de inicio para la personalización. Puede eliminar o cambiar cualquiera de las propiedades para obtener diferentes colores de fondo, estilos de animación o triángulos basados en imágenes. Tenga en cuenta que tanto los efectos animados como los triángulos de CSS pueden aparecer con errores en los navegadores más antiguos. Intente descargar una copia de mi código y ver qué puede construir para sus propios proyectos.