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. La información sobre herramientas es una característica muy común en los sitios web modernos.
Nota: debe tener Foundation CSS descargado en su sistema desde el sitio web oficial de Foundation CSS .
Atributos de información sobre herramientas de Foundation CSS:
- información sobre herramientas de datos: este atributo le dice al navegador que el elemento en el que se menciona es una información sobre herramientas.
- título: este atributo contiene el valor que se mostrará dentro de la información sobre herramientas (es decir, es básicamente el texto de la sugerencia) cuando el usuario se desplaza sobre el elemento en particular.
Sintaxis:
<span data-tooltip tabindex="1" title="...">...</span>
Ejemplo: El siguiente código muestra la información sobre herramientas simple. La carpeta de trabajo debe tener la carpeta « Foundation-Sites-CSS» descargada y los archivos precompilados necesarios.
HTML
<!doctype html> <html class="no-js" lang="en" dir="ltr"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Foundation for Sites</title> <link rel="stylesheet" href= "Foundation-Sites-CSS/css/foundation.css"> <link rel="stylesheet" href= "Foundation-Sites_CSS/css/app.css"> </head> <body> <h1>Foundation CSS tooltip</h1> <span data-tooltip tabindex="1" title="Tooltip">Hover over me </span> <script src= "Foundation-Sites-CSS/js/vendor/jquery.js"> </script> <script src= "https://code.jquery.com/jquery-2.1.4.min.js"> </script> <script src= "https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.js"> </script> <script src= "Foundation-Sites-CSS/js/vendor/foundation.js"> </script> <script src="Foundation-Sites-CSS/js/app.js"></script> </body> </html>
Producción:
información sobre herramientas sencilla
Posicionamiento de información sobre herramientas: el atributo de clase nos ayuda a colocar la información sobre herramientas en una posición diferente.
Clases de posición de información sobre herramientas:
- top: esta clase se utiliza para establecer la información sobre herramientas en la parte superior.
- bottom: esta clase se utiliza para establecer la información sobre herramientas en la parte inferior.
- izquierda: esta clase se utiliza para establecer la información sobre herramientas a la izquierda.
- derecha: esta clase se utiliza para configurar la información sobre herramientas a la derecha
Sintaxis:
<span class="top" data-tooltip tabindex="1" title="...">...</span>
Ejemplo: el siguiente código muestra la posición de la información sobre herramientas a la derecha . El desarrollador puede hacer cambios de acuerdo a la necesidad. En el siguiente código, asignamos una información sobre herramientas al texto «Pasa el cursor sobre mí» que aparecerá a la derecha.
HTML
<!doctype html> <html class="no-js" lang="en" dir="ltr"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Foundation Sites</title> <link rel="stylesheet" href="Foundation-Sites-CSS/css/foundation.css"> <link rel="stylesheet" href="Foundation-Sites_CSS/css/app.css"> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="Foundation-Sites-CSS/js/vendor/jquery.js"></script> <script src="Foundation-Sites-CSS/js/vendor/foundation.js"></script> <script src="Foundation-Sites-CSS/js/app.js"></script> </head> <body> <h1 style="color:green;">GeeksforGeeks</h1> <h1>Foundation CSS tooltip</h1> <span data-tooltip style="margin:5em" class="right" tabindex="1" title="Tooltip">Hover over me </span> </body> </html>
Producción:
Posicionamiento explícito de la información sobre herramientas y sus datos: podemos colocar la información sobre herramientas y la sugerencia utilizando el atributo «posición de datos» y «alineación de datos» . La «alineación de datos» nos ayuda a alinear el texto dentro de la información sobre herramientas en una posición diferente.
Atributos básicos de CSS:
- data-position: este atributo nos ayuda a posicionar la información sobre herramientas en diferentes direcciones del elemento (superior, derecha, izquierda o inferior) de acuerdo con el valor mencionado.
- alineación de datos: este atributo ayuda a alinear el texto dentro de la información sobre herramientas (es decir, la punta) como alinear a la izquierda, a la derecha o al centro según el valor dado.
Sintaxis:
<button class="button" type="button" data-tooltip tabindex="1"
title="..." data-position="right" data-alignment="right">
....
</button>
Ejemplo 1: la información sobre herramientas se coloca en la parte inferior utilizando el atributo «posición de datos» establecido en «inferior». Ahora, también podemos alinear el texto dentro de la información sobre herramientas usando el atributo «alineación de datos» a la izquierda, a la derecha o al centro. Hemos creado tres botones con información sobre herramientas en la parte inferior y cada uno de ellos alineado en diferentes posiciones respectivamente.
HTML
<!doctype html> <html class="no-js" lang="en" dir="ltr"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Foundation for Sites</title> <link rel="stylesheet" href="Foundation-Sites-CSS/css/foundation.css"> <link rel="stylesheet" href="Foundation-Sites_CSS/css/app.css"> <script src="Foundation-Sites-CSS/js/vendor/jquery.js"></script> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src= "https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.js"> </script> <script src="Foundation-Sites-CSS/js/vendor/foundation.js"></script> <script src="Foundation-Sites-CSS/js/app.js"></script> </head> <body> <h1 style="color:green;">GeeksforGeeks</h1> <h1>Foundation CSS tooltip</h1> <button style="margin:8em;" class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="bottom" data-alignment="left"> Bottom Left </button> <button style="margin:8em;" class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="bottom" data-alignment="center"> Bottom Center </button> <button style="margin:8em;" class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="bottom" data-alignment="right"> Bottom Right </button> </body> </html>
Producción:
Ejemplo 2: la información sobre herramientas se coloca en la parte superior utilizando el atributo «posición de datos» establecido en «superior». Ahora, también podemos alinear el texto dentro de la información sobre herramientas usando el atributo «alineación de datos» a la izquierda, a la derecha o al centro. En el siguiente ejemplo de código, hemos creado tres botones con información sobre herramientas en la parte superior y alineados en diferentes posiciones respectivamente.
HTML
<!doctype html> <html class="no-js" lang="en" dir="ltr"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Foundation CSS Sites</title> <link rel="stylesheet" href="Foundation-Sites-CSS/css/foundation.css"> <link rel="stylesheet" href="Foundation-Sites_CSS/css/app.css"> <script src="Foundation-Sites-CSS/js/vendor/jquery.js"></script> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src= "https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.js"> </script> <script src="Foundation-Sites-CSS/js/vendor/foundation.js"></script> <script src="Foundation-Sites-CSS/js/app.js"></script> </head> <body> <h1 style="color:green;">GeeksforGeeks</h1> <h1>Foundation CSS tooltip</h1> <button style="margin:8em;" class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="top" data-alignment="left"> Top Left </button> <button style="margin: 8em;" class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="top" data-alignment="center"> Top Center </button> <button style="margin: 8em;" class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="top" data-alignment="right"> Top Right </button> </body> </html>
Producción:
Ejemplo 3: La información sobre herramientas se coloca a la izquierda usando el atributo «posición de datos» establecido en «izquierda». Ahora, también podemos alinear el texto dentro de la información sobre herramientas usando el atributo «alineación de datos» a la izquierda, a la derecha o al centro. En el siguiente ejemplo de código, hemos creado tres botones con información sobre herramientas a la izquierda y cada uno en diferentes posiciones respectivamente.
HTML
<!doctype html> <html class="no-js" lang="en" dir="ltr"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Foundation CSS Sites</title> <link rel="stylesheet" href="Foundation-Sites-CSS/css/foundation.css"> <link rel="stylesheet" href="Foundation-Sites_CSS/css/app.css"> <script src="Foundation-Sites-CSS/js/vendor/jquery.js"></script> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.js"> </script> <script src="Foundation-Sites-CSS/js/vendor/foundation.js"></script> <script src="Foundation-Sites-CSS/js/app.js"></script> </head> <body> <h1 style="color:green;">GeeksforGeeks</h1> <h1>Foundation CSS tooltip</h1> <button style="margin: 12em;" class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="left" data-alignment="top"> Left Top </button> <button style="margin:8em;" class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="left" data-alignment="center"> Left Center </button> <button style="margin:8em;" class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="left" data-alignment="bottom"> Left Bottom </button> </body> </html>
Producción:
Ejemplo 4: la información sobre herramientas se coloca a la derecha utilizando el atributo «posición de datos» establecido en «derecha». Ahora, también podemos alinear el texto dentro de la información sobre herramientas usando el atributo «alineación de datos» a la izquierda, a la derecha o al centro. En el siguiente ejemplo de código, hemos creado tres botones con información sobre herramientas a la izquierda y cada uno en diferentes posiciones respectivamente.
HTML
<!doctype html> <html class="no-js" lang="en" dir="ltr"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Foundation CSS Sites</title> <link rel="stylesheet" href="Foundation-Sites-CSS/css/foundation.css"> <link rel="stylesheet" href="Foundation-Sites_CSS/css/app.css"> <script src="Foundation-Sites-CSS/js/vendor/jquery.js"></script> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.js"></script> <script src="Foundation-Sites-CSS/js/vendor/foundation.js"></script> <script src="Foundation-Sites-CSS/js/app.js"></script> </head> <body> <h1 style="color:green;">GeeksforGeeks</h1> <h2>Foundation CSS Tooltip</h2> <button style="margin: 8em;" class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="right" data-alignment="top"> Right Top </button> <button style="margin:8em;" class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="right" data-alignment="center"> Right Center </button> <button style="margin: 8em;" class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="right" data-alignment="bottom"> Right Bottom </button> </body> </html>
Producción:
Nota: En el artículo, hemos utilizado la información sobre herramientas dentro de los elementos de intervalo o botón. Pero también podemos usar la información sobre herramientas dentro de otros elementos. No se limita a ciertos elementos.
Referencia: https://get.foundation/sites/docs/tooltip.html
Publicación traducida automáticamente
Artículo escrito por saikatmohanta43434 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA