Foundation CSS es el marco frontend de CSS que se utiliza para crear sitios web, aplicaciones y correos electrónicos receptivos que funcionan perfectamente en cualquier dispositivo. Está escrito usando HTML, CSS y Javascript y es utilizado por muchas compañías famosas como Amazon, Facebook, eBay, etc. Utiliza paquetes como Grunt y Libsass para una codificación y control rápidos y un compilador Saas para acelerar el desarrollo.
Kitchen Sink tiene los elementos para trabajar en sitios web y aplicaciones. La información sobre herramientas es el pequeño cuadro de diálogo que muestra algún mensaje cuando pasamos el mouse sobre el enlace. Cuando queremos mostrar algún mensaje importante cuando se desplaza algún enlace, podemos hacerlo con la ayuda de una información sobre herramientas.
Foundation CSS Fregadero de cocina Clase de información sobre herramientas:
- has-tip: Se utiliza para crear un cuadro emergente para que ese texto se muestre cuando pasamos el cursor sobre el enlace.
Sintaxis:
<span data-tooltip aria-haspopup="true"
class="has-tip">
...
</span>
Ejemplo 1:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Kitchen Sink Tooltip</title>
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Foundation CSS Kitchen Sink Tooltip</h3>
<p>A Computer Science portal for
<span data-tooltip aria-haspopup="true"
class="has-tip"
data-disable-hover="false"
tabindex=1
title="This is tooltip example">geeks</span>.
It contains well written, well thought and well
explained computer science and programming articles</p>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Información sobre herramientas de fregadero de cocina Foundation CSS
Ejemplo 2:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Foundation CSS Kitchen Sink Tooltip</h3>
<p>A Computer Science portal for
<span data-tooltip aria-haspopup="true"
class="has-tip"
data-disable-hover="false"
tabindex=1
title="This is tooltip example">geeks</span>.
It contains well written, well thought and well
explained computer science and programming articles</p>
<span data-tooltip aria-haspopup="true"
class="has-tip"
data-disable-hover="false"
tabindex=2
title="This is GeeksforGeeks Image">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
</span>
<strong>
<span data-tooltip aria-haspopup="true"
class="has-tip"
data-disable-hover="false"
tabindex=1
title="A Computer Science portal for geeks">
GeeksforGeeks
</span>
</strong>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Información sobre herramientas de fregadero de cocina Foundation CSS
Referencia : https://get.foundation/sites/docs/kitchen-sink.html#tooltip
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA