Cartilla CSS CSS
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 con varias líneas se utiliza principalmente cuando el contenido que queremos mostrar en la información sobre herramientas es largo (longitudinalmente), especificando el modificador tooltipped-multiline en el componente de información sobre herramientas para que el mensaje de información sobre herramientas se ajuste a las siguientes líneas. La información sobre herramientas de varias líneas tiene un ancho máximo de 250 px.
Información sobre herramientas de Primer CSS con clase de líneas múltiples:
- tooltipped-multiline: esta clase se usa para hacer que la información sobre herramientas se expanda a varias líneas.
Sintaxis:
<element class="tooltipped tooltipped-n tooltipped-multiline">
Content
</element>
Ejemplo 1: este ejemplo muestra la implementación del modificador tooltipped-multiline en el componente tooltip para convertirlo en 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 Multiline - 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>Tooltip Multiline - Primer CSS</h4> </div> <div class="d-flex flex-justify-center mt-5 flex-wrap"> <button type="button" class="tooltipped tooltipped-s tooltipped-multiline p-2 border" aria-label= "This is a multiline tooltip. The long content will wrap on the next lines."> Multiline Tooltip </button> </div> </body> </html>
Producción:
Primer CSS Multiline Tooltip
Ejemplo 2: Este ejemplo muestra la implementación de la información sobre herramientas de varias líneas con diferentes direcciones de 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 Multiline - 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>Tooltip Multiline - Primer CSS</h4> </div> <div class="d-flex flex-justify-center mt-5 flex-wrap"> <button type="button" class="tooltipped tooltipped-n tooltipped-multiline m-2 p-2 border" aria-label= "Multiline Tooltip to the North. The Long content will be wrapped on new lines."> Multiline Tooltip to the North </button> <button type="button" class="tooltipped tooltipped-s tooltipped-multiline m-2 p-2 border" aria-label= "Multiline Tooltip to the South. The Long content will be wrapped on new lines."> Multiline Tooltip to the South </button> <button type="button" class="tooltipped tooltipped-e tooltipped-multiline m-2 p-2 border" aria-label= "Multiline Tooltip to the East. The Long content will be wrapped on new lines."> Multiline Tooltip to the East </button> <button type="button" class="tooltipped tooltipped-w tooltipped-multiline m-2 p-2 border" aria-label= "Multiline Tooltip to the West. The Long content will be wrapped on new lines."> Multiline Tooltip to the West </button> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/components/tooltips#tooltips-with-multiple-lines
Publicación traducida automáticamente
Artículo escrito por prakhara306 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA