La información sobre herramientas de Spectre es bastante útil para mostrar la descripción de diferentes elementos en la página web. La información sobre herramientas se puede invocar en cualquier elemento de una página web. Proporciona etiquetas de información de contexto que aparecen al pasar el mouse y enfocar. El componente Tooltips está construido completamente en CSS.
Para crear una información sobre herramientas, debe agregar la clase de información sobre herramientas y el atributo de información sobre herramientas de datos , que contiene el contenido de la información sobre herramientas. Y al usar la clase tooltip-right, tooltip-bottom o tooltip-left, puede definir la posición de una información sobre herramientas. De forma predeterminada, la información sobre herramientas aparece sobre el elemento.
Información sobre herramientas de espectro:
- Información sobre herramientas de varias líneas: se utiliza para crear una información sobre herramientas de varias líneas; la información sobre herramientas normal intentará mostrar el contenido de información sobre herramientas de datos en una sola línea.
Clase de información sobre herramientas de Spectre:
- información sobre herramientas: esta clase se usa para crear un elemento de información sobre herramientas, las cosas deben envolverse dentro de este elemento perteneciente a la clase.
- tooltip-right: esta clase se utiliza para establecer el lado emergente de la información sobre herramientas a la derecha.
- tooltip-bottom: esta clase se utiliza para establecer la parte inferior del lado emergente de la información sobre herramientas.
- tooltip-top: esta clase se utiliza para configurar la parte superior emergente de la información sobre herramientas.
- tooltip-left: esta clase se utiliza para establecer el lado izquierdo emergente de la información sobre herramientas.
Sintaxis:
<button class="btn tooltip" data-tooltip="..."> ... </button>
Ejemplo: El siguiente ejemplo ilustra la información sobre herramientas de Spectre. En este ejemplo, crearemos 4 botones y cada lado de la información sobre herramientas se utilizará en ese botón.
HTML
<!DOCTYPE html> <html> <head> <title>SPECTRE Tooltip Class</title> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> </head> <body> <center> <h1>GeeksforGeeks</h1> <strong>SPECTRE Tooltip Class</strong> <br><br> <button class="btn tooltip tooltip-left" data-tooltip="Left Tooltip"> Left Tooltip </button> <button class="btn tooltip tooltip-top" data-tooltip="Top Tooltip"> Top Tooltip </button> <button class="btn tooltip tooltip-bottom" data-tooltip="Bottom Tooltip"> Bottom Tooltip </button> <button class="btn tooltip tooltip-right" data-tooltip="Right Tooltip"> Right Tooltip </button> </center> </body> </html>
Producción:
Información sobre herramientas de espectro
Referencia: https://picturepan2.github.io/spectre/components/tooltips.html#tooltips
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA