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.
En Foundation CSS, la información sobre herramientas se utiliza para definir ambas posiciones para la sugerencia. Con esta información sobre herramientas, puede usar la posición de datos junto con la alineación de datos para definir las posiciones del cuadro.
Hay 4 posiciones y alineaciones válidas, es decir, izquierda, derecha, arriba y abajo, respectivamente.
Valores de atributo de posición de datos de posicionamiento explícito de Foundation CSS Tooltip utilizados:
- izquierda: Se utiliza para colocar la información sobre herramientas a la izquierda.
- right: Se utiliza para colocar el tooltip a la derecha.
- top: Se utiliza para colocar la información sobre herramientas en la parte superior.
- bottom: Se utiliza para colocar la información sobre herramientas en la parte inferior.
Valores de atributo de alineación de datos de posicionamiento explícito de Foundation CSS Tooltip utilizados:
- izquierda: Se utiliza para alinear el puntero de información sobre herramientas a la izquierda con respecto al botón.
- derecha: se utiliza para alinear el puntero de información sobre herramientas a la derecha con respecto al botón.
- top: Se utiliza para alinear la parte superior del puntero del tooltip con respecto al botón.
- bottom: Se utiliza para alinear la parte inferior del puntero del tooltip con respecto al botón.
Sintaxis:
<button class="button" type="button"
data-tooltip title="..."
data-alignment="left/right/top/bottom"
data-position="top/bottom/left/right">
...
</button>
Ejemplo 1:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Tooltip Explicit Position</title>
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"
crossorigin="anonymous">
</script>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.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.5.1/dist/js/foundation.min.js"
crossorigin="anonymous">
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Foundation CSS Tooltip Explicit Position</h3>
<button class="button success"
type="button"
data-tooltip
title="GeeksforGeeks"
data-alignment="left"
data-position="top">
Top and Left
</button>
<button class="button warning"
type="button"
data-tooltip
title="GeeksforGeeks"
data-alignment="center"
data-position="top">
Top and Center
</button>
<button class="button alert"
type="button"
data-tooltip
title="GeeksforGeeks"
data-alignment="right"
data-position="top">
Top and Right
</button>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Foundation CSS Tooltip Posicionamiento explícito
Ejemplo 2:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Tooltip Explicit Position</title>
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"
crossorigin="anonymous">
</script>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.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.5.1/dist/js/foundation.min.js"
crossorigin="anonymous">
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Foundation CSS Tooltip Explicit Position</h3>
<button class="button success"
type="button"
data-tooltip
title="GeeksforGeeks"
data-position="left"
data-alignment="top">
pos: Left and align: Top
</button>
<button class="button warning"
type="button"
data-tooltip
title="GeeksforGeeks"
data-position="left"
data-alignment="center">
pos: Left and align: Center
</button>
<button class="button alert"
type="button"
data-tooltip
title="GeeksforGeeks"
data-position="left"
data-alignment="bottom">
pos: Left and align: Bottom
</button>
<br>
<br>
<br>
<button class="button alert"
type="button"
data-tooltip
title="GeeksforGeeks"
data-position="right"
data-alignment="top">
pos: Right and align: Top
</button>
<button class="button warning"
type="button"
data-tooltip
title="GeeksforGeeks"
data-position="right"
data-alignment="center">
pos: Right and align: Center
</button>
<button class="button success"
type="button"
data-tooltip
title="GeeksforGeeks"
data-position="right"
data-alignment="bottom">
pos: Right and align: Bottom
</button>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Foundation CSS Tooltip Posicionamiento explícito
Referencia: https://get.foundation/sites/docs/tooltip.html#explicit-positioning