Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientado a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
La alineación de información sobre herramientas se puede utilizar para alinear la información sobre herramientas a la izquierda o a la derecha utilizando las diferentes clases de alineación.
Primer CSS Clase de alineación de información sobre herramientas:
- tooltipped-align-right-1: esta clase se usa en el contenedor de información sobre herramientas para alinear la información sobre herramientas a la derecha del elemento con una flecha más intencionada.
- tooltipped-align-right-2: esta clase se usa en el contenedor de información sobre herramientas para alinear la información sobre herramientas a la derecha del elemento con una flecha menos intencionada.
- tooltipped-align-left-1: esta clase se usa en el contenedor de información sobre herramientas para alinear la información sobre herramientas a la izquierda del elemento con una flecha más intencionada.
- tooltipped-align-left-2: esta clase se usa en el contenedor de información sobre herramientas para alinear la información sobre herramientas a la izquierda del elemento con una flecha menos intencionada.
Sintaxis:
<element class="tooltipped tooltipped-nw tooltipped-align-right-1 border">
...
</element>
Ejemplo 1: este ejemplo ilustra la implementación de las clases de alineación de información sobre herramientas en Primer CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title> Tooltip Alignment - Primer CSS </title> <link href= "https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <div class="text-center"> <h2>GeeksforGeeks</h2> <h4>Primer CSS - Tooltip Alignment</h4> </div> <div class="d-flex flex-justify-center mt-5 flex-wrap"> <button type="button" class="tooltipped tooltipped-nw tooltipped-align-right-1 m-2 p-2 border" aria-label="Tooltipped NW and aligned right."> Right Aligned Tooltip 1 </button> <button type="button" class="tooltipped tooltipped-nw tooltipped-align-right-2 m-2 p-2 border" aria-label="Tooltipped NW and aligned right."> Right Aligned Tooltip 2 </button> <button type="button" class="tooltipped tooltipped-ne tooltipped-align-left-1 m-2 p-2 border" aria-label="Tooltipped NW and aligned left."> Left Aligned Tooltip 1 </button> <button type="button" class="tooltipped tooltipped-ne tooltipped-align-left-2 m-2 p-2 border" aria-label="Tooltipped NW and aligned left."> Left Aligned Tooltip 2 </button> </div> </body> </html>
Producción:
Primer CSS Alineación de información sobre herramientas
Ejemplo 2: El siguiente ejemplo muestra la alineación de la información sobre herramientas de Primer CSS con diferentes elementos.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title> Tooltip Alignment - Primer CSS </title> <link href= "https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <div class="text-center"> <h2>GeeksforGeeks</h2> <h4> Primer CSS - Tooltip Alignment with different elements </h4> </div> <div class="d-flex flex-justify-center mt-5 flex-wrap"> <button type="button" class="tooltipped tooltipped-nw tooltippd-align-right-1 tooltipped-no-delay m-2 p-2 border" aria-label="Right Aligned Tooltip on a button."> Tooltip on a button </button> <p class="tooltipped tooltipped-nw tooltipped-align-right-2 m-2 p-2" aria-label="Right Aligned Tooltip on a paragraph."> Tooltip on a paragraph </p> <h5 class="tooltipped tooltipped-ne tooltipped-align-left-1 m-2 p-2" aria-label="Left Aligned Tooltip on a heading."> Tooltip on a heading </h5> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/components/tooltips#tooltip-alignment
Publicación traducida automáticamente
Artículo escrito por prakhara306 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA