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 la información sobre herramientas izquierda y derecha.
La información sobre herramientas izquierda y derecha se utiliza para colocar la información sobre herramientas a la derecha y a la izquierda de la palabra. Para usar la información sobre herramientas a la izquierda y a la derecha en Foundation CSS, usamos las clases «izquierda» y «derecha». Las clases izquierda y derecha colocan la información sobre herramientas a la izquierda y derecha de <span> respectivamente.
Foundation CSS Tooltip izquierda y derecha Clases:
- izquierda: la clase izquierda se utiliza para colocar la información sobre herramientas a la izquierda del <span>.
- right: la clase right se usa para colocar la información sobre herramientas a la izquierda del <span>.
Sintaxis:
<span data-tooltip class="left/right"
tabindex="1" title="...">...</span>
Ejemplo 1: este ejemplo demuestra la variación de información sobre herramientas derecha en diferentes elementos.
HTML
<!doctype html> <html> <head> <!-- 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 tooltip</h1> <span data-tooltip class="has-tip right" tabindex="1" title="Right Tip">Span</span><br /> <h6 data-tooltip class="has-tip right" tabindex="1" title="Right Tip">h6</h6><br /> <h5 data-tooltip class="has-tip right" tabindex="1" title="Right Tip">h5</h5><br /> <h4 data-tooltip class="has-tip right" tabindex="1" title="Right Tip">h4</h4><br /> <h3 data-tooltip class="has-tip right" tabindex="1" title="Right Tip">h3</h3><br /> <h2 data-tooltip class="has-tip right" tabindex="1" title="Right Tip">h2</h2><br /> <h1 data-tooltip class="has-tip right" tabindex="1" title="Right Tip">h1</h1><br /> <script> $(document).foundation(); </script> </body> </html>
Producción:
Producción
Ejemplo 2: Este ejemplo demuestra la variación de información sobre herramientas izquierda en diferentes elementos.
HTML
<!doctype html> <html> <head> <!-- 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 tooltip</h1> <span data-tooltip class="has-tip left" tabindex="1" title="left Tip">Span</span><br /> <h6 data-tooltip class="has-tip left" tabindex="1" title="left Tip">h6</h6><br /> <h5 data-tooltip class="has-tip left" tabindex="1" title="left Tip">h5</h5><br /> <h4 data-tooltip class="has-tip left" tabindex="1" title="left Tip">h4</h4><br /> <h3 data-tooltip class="has-tip left" tabindex="1" title="left Tip">h3</h3><br /> <h2 data-tooltip class="has-tip left" tabindex="1" title="left Tip">h2</h2><br /> <h1 data-tooltip class="has-tip left" tabindex="1" title="left Tip">h1</h1><br /> <script>$(document).foundation();</script> </body> </html>
Producción:
Producción
Referencia: https://get.foundation/sites/docs/tooltip.html#tooltip-right-and-left
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA