Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de hermosos sitios web, aplicaciones y correos electrónicos receptivos para que se vean increíbles y puedan ser accesibles para cualquier dispositivo. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco se basa en un arranque similar a Saas. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.
Una información sobre herramientas es un texto pequeño o, a veces, una palabra que aparece cuando el usuario mueve el mouse sobre una palabra en particular o un botón o control en particular en el sitio web. Foundation CSS tiene múltiples variaciones de información sobre herramientas, como la parte superior de la información sobre herramientas, la información sobre herramientas al hacer clic, la información sobre herramientas a la izquierda y la información sobre herramientas a la derecha. En este artículo, aprenderemos sobre cómo hacer clic en información sobre herramientas.
De forma predeterminada, hacer clic en una información sobre herramientas la dejará abierta hasta que haga clic en otro lugar. Pero a veces es posible que necesitemos que la información sobre herramientas sea visible solo cuando se está desplazando. Para deshabilitar la información sobre herramientas abierta hasta que haga clic en otra parte de Foundation CSS, usamos el atributo data-click-open y lo configuramos como «falso». El dato-clic-abrir se establece de forma predeterminada en verdadero.
Atributo de clic de información sobre herramientas de Foundation CSS:
- data-click-open: es un parámetro booleano que es verdadero por defecto, si se establece en falso hará que la información sobre herramientas desaparezca tan pronto como dejemos de pasar el cursor sobre el elemento.
Sintaxis:
<span data-tooltip data-click-open="false" tabindex="1" title="...">...</span>
Ejemplo 1: Este ejemplo demuestra la variación de Clic de información sobre herramientas en el CSS básico.
HTML
<!doctype html> <html> <head> <title>Foundation Sites</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <!-- Compressed JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> </script> </head> <body style="padding: 100px;"> <h1 style="color:green;"> GeeksforGeeks </h1> <h1>Foundation CSS Clicking tooltip</h1> <span data-tooltip class="has-tip" data-click-open="false" tabindex="1" title="Clicking Tip"> Geeksforgeeks </span> is a Computer Science portal for geeks. <span data-tooltip class="has-tip" data-click-open="false" tabindex="1" title="Clicking Tip"> Geeksforgeeks </span> contains well written, well thought and well explained computer science and programming articles. <script> $(document).foundation(); </script> </body> </html>
Producción:
Producción
Ejemplo 2: este ejemplo demuestra la variación de la información sobre herramientas haciendo clic y su comparación con no hacer clic en el CSS básico.
HTML
<!doctype html> <html> <head> <title>Foundation Sites</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <!-- Compressed JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> </script> </head> <body style="padding: 100px;"> <h1 style="color:green;"> GeeksforGeeks </h1> <h1>Foundation CSS Clicking tooltip</h1> <span data-tooltip class="has-tip" data-click-open="true" tabindex="1" title="Non Clicking Tip"> This tooltip will stay visible till clicked somewhere else. </span><br /> <span data-tooltip class="has-tip" data-click-open="false" tabindex="1" title="Clicking Tip"> This tooltip will only be visible till it is hovered on. </span> <script> $(document).foundation(); </script> </body> </html>
Producción:
Producción
Referencia: https://get.foundation/sites/docs/tooltip.html#tooltip-clicking
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA