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