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 información sobre herramientas de Primer CSS se utiliza para proporcionar sugerencias textuales interactivas al usuario sobre el elemento cuando se mueve el puntero del mouse. La información sobre herramientas sin retraso ayuda a que aparezca el texto o la información con un ligero retraso, de forma predeterminada, cuando el elemento se desplaza o se enfoca, pero este retraso se puede eliminar utilizando el modificador de información sobre herramientas sin retraso en el componente de información sobre herramientas.
Información sobre herramientas de Primer CSS sin atributo de retraso:
- tooltipped-no-delay: este atributo se usa en el componente de información sobre herramientas para eliminar la demora en mostrar la información sobre herramientas.
Sintaxis:
<element class="tooltipped tooltipped-nw tooltipped-no-delay">
...
</element>
Ejemplo 1: El siguiente ejemplo ilustra la implementación de la información sobre herramientas sin demora en Primer CSS especificando el modificador tooltipped-no-delay para eliminar la demora en la apertura de la información sobre herramientas.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title> Tooltip with no delay - 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 with no delay</h4> </div> <div class="d-flex flex-justify-center mt-3 flex-wrap"> <button type="button" class="tooltipped tooltipped-nw tooltipped-no-delay m-2 p-2 border" aria-label="Tooltip with no delay"> Tooltip with no delay </button> <button type="button" class="tooltipped tooltipped-nw m-2 p-2 border" aria-label="Tooltip with default delay"> Tooltip with default delay </button> </div> </body> </html>
Producción:
Primer CSS Tooltip sin demora
Ejemplo 2: Este ejemplo muestra el uso del modificador tooltipped-no-delay con la información sobre herramientas multilínea.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title> Tooltip with no delay - 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 - Multiline Tooltip with no delay</h4> </div> <div class="d-flex flex-justify-center mt-3 flex-wrap"> <button type="button" class="tooltipped tooltipped-sw tooltipped-no-delay m-2 p-2 border" aria-label="This is a simple tooltip with no delay"> Simple Tooltip with no delay </button> <button type="button" class="tooltipped tooltipped-multiline tooltipped-no-delay tooltipped-se m-2 p-2 border" aria-label="This is a multiline tooltip with no delay. Multiline tooltips have a max-width of 250px"> Multiline Tooltip with no delay </button> </div> </body> </html>
Producción:
Primer CSS Multiline Tooltip sin demora
Referencia: https://primer.style/css/components/tooltips#tooltips-with-no-delay
Publicación traducida automáticamente
Artículo escrito por prakhara306 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA