Cartilla CSS CSS
La información sobre herramientas de Primer CSS se utiliza para proporcionar sugerencias textuales interactivas al usuario sobre el elemento cuando el puntero del mouse se mueve sobre o está enfocado. Es, por defecto, está oculto. La Dirección de información sobre herramientas se puede especificar utilizando las direcciones norte, sur, este y oeste.
Clase de dirección de información sobre herramientas de Primer CSS:
- tooltipped-n: esta clase se utiliza para establecer la dirección de la información sobre herramientas al norte del elemento.
- tooltipped-s: esta clase se utiliza para establecer la dirección de la información sobre herramientas al sur del elemento.
- tooltipped-e: esta clase se utiliza para establecer la dirección de la información sobre herramientas al este del elemento.
- tooltipped-w: esta clase se utiliza para establecer la dirección de la información sobre herramientas al oeste del elemento.
- tooltipped-nw: esta clase se utiliza para establecer la dirección de la información sobre herramientas al noroeste del elemento.
- tooltipped-ne: esta clase se utiliza para establecer la dirección de la información sobre herramientas al noreste del elemento.
- tooltipped-sw: esta clase se utiliza para establecer la dirección de la información sobre herramientas al suroeste del elemento.
- tooltipped-se: esta clase se utiliza para establecer la dirección de la información sobre herramientas al sureste del elemento.
Sintaxis:
<element class="tooltipped tooltipped-n border"> Content </element>
Ejemplo 1: este ejemplo muestra la implementación de las clases de dirección de la información sobre herramientas para establecer la dirección de la 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 Direction - 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 Direction</h4> </div> <div class="d-flex flex-justify-center mt-5 flex-wrap"> <button type="button" class="tooltipped tooltipped-n m-2 p-2 border" aria-label="Tooltip to the North."> Tooltip to the North </button> <button type="button" class="tooltipped tooltipped-s m-2 p-2 border" aria-label="Tooltip to the South."> Tooltip to the South </button> <button type="button" class="tooltipped tooltipped-e m-2 p-2 border" aria-label="Tooltip to the East."> Tooltip to the East </button> <button type="button" class="tooltipped tooltipped-w m-2 p-2 border" aria-label="Tooltip to the West."> Tooltip to the West </button> <button type="button" class="tooltipped tooltipped-nw m-2 p-2 border" aria-label="Tooltip to the NorthWest."> Tooltip to the NorthWest </button> <button type="button" class="tooltipped tooltipped-ne m-2 p-2 border" aria-label="Tooltip to the NorthEast."> Tooltip to the NorthEast </button> <button type="button" class="tooltipped tooltipped-sw m-2 p-2 border" aria-label="Tooltip to the SouthWest."> Tooltip to the SouthWest </button> <button type="button" class="tooltipped tooltipped-se m-2 p-2 border" aria-label="Tooltip to the SouthEast."> Tooltip to the SouthEast </button> </div> </body> </html>
Producción:
Primer CSS Tooltip Dirección
Ejemplo 2: este ejemplo muestra la implementación de la clase de dirección de información sobre herramientas con una clase sin demora de información sobre herramientas para eliminar el retraso 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 Direction - 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 Direction with no delay</h4> </div> <div class="d-flex flex-justify-center mt-5 flex-wrap"> <button type="button" class="tooltipped tooltipped-n tooltipped-no-delay m-2 p-2 border" aria-label="Tooltip to the North."> Tooltip to the North </button> <button type="button" class="tooltipped tooltipped-s tooltipped-no-delay m-2 p-2 border" aria-label="Tooltip to the South."> Tooltip to the South </button> <button type="button" class="tooltipped tooltipped-e tooltipped-no-delay m-2 p-2 border" aria-label="Tooltip to the East."> Tooltip to the East </button> <button type="button" class="tooltipped tooltipped-w tooltipped-no-delay m-2 p-2 border" aria-label="Tooltip to the West."> Tooltip to the West </button> <button type="button" class="tooltipped tooltipped-nw tooltipped-no-delay m-2 p-2 border" aria-label="Tooltip to the NorthWest."> Tooltip to the NorthWest </button> <button type="button" class="tooltipped tooltipped-ne tooltipped-no-delay m-2 p-2 border" aria-label="Tooltip to the NorthEast."> Tooltip to the NorthEast </button> <button type="button" class="tooltipped tooltipped-sw tooltipped-no-delay m-2 p-2 border" aria-label="Tooltip to the SouthWest."> Tooltip to the SouthWest </button> <button type="button" class="tooltipped tooltipped-se tooltipped-no-delay m-2 p-2 border" aria-label="Tooltip to the SouthEast."> Tooltip to the SouthEast </button> </div> </body> </html>
Producción:
Primer CSS Tooltip Dirección SIN Demora
Referencia: https://primer.style/css/components/tooltips#tooltip-direction
Publicación traducida automáticamente
Artículo escrito por prakhara306 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA