Blaze UI es un marco de código abierto de CSS. Es un conjunto de herramientas de interfaz de usuario liviano y proporciona excelentes herramientas para crear aplicaciones personalizadas y escalables. Puede funcionar con cualquier framework que exista. Puede adaptarse a cualquier ecosistema. Todos los diseños o CSS son móviles primero y, por lo tanto, receptivos. Su proyecto está disponible en código abierto, por lo que una gran comunidad lo mantiene.
Blaze UI Tooltips es una información sobre herramientas de CSS puro que se muestra sobre un elemento cuando el mouse o el puntero se han desplazado sobre él. La información sobre herramientas es útil cuando los iconos o botones son confusos o muestran algún mensaje adicional sobre la función del elemento.
Blaze UI Tooltips Clases:
- c-tooltip: Se utiliza para notificar que el elemento contiene un tooltip.
- c-tooltip-right: coloca la información sobre herramientas a la derecha.
- c-tooltip-left: coloca la información sobre herramientas a la izquierda.
- c-tooltip-top: coloca la información sobre herramientas en la parte superior.
- c-tooltip-bottom: coloca la información sobre herramientas en la parte inferior.
Atributo de información sobre herramientas de la interfaz de usuario de Blaze:
- aria-label: este atributo contiene el mensaje de información sobre herramientas.
Sintaxis : Cree una información sobre herramientas para un elemento de la siguiente manera:
<div class="c-tooltip c-tooltip--top"
aria-label="Welcome to GeeksforGeeks">
Hover
</div>
Ejemplo 1: En el siguiente ejemplo, tenemos diferentes información sobre herramientas con diferentes posiciones.
HTML
<!DOCTYPE html> <html lang="en"> <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" /> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> <script type="module" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> </script> <script nomodule="" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> </script> <script src="node_modules/@blaze/atoms/dist/blaze-atoms.js"></script> </head> <body> <div class="o-container"> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <strong>Blaze UI Tooltips</strong> <br /> <br /> <span class="c-button c-button--warning c-tooltip c-tooltip--left" aria-label="Welcome to GeeksforGeeks"> Tooltip 1 </span> <span class="c-button c-button--info c-tooltip c-tooltip--bottom" aria-label="Algorithms"> Tooltip 2 </span> <span class="c-button c-button--brand c-tooltip c-tooltip--top" aria-label="Data Structures"> Tooltip 3 </span> <span class="c-button c-button--success c-tooltip c-tooltip--right" aria-label="Java"> Tooltip 4 </span> </center> </div> </body> </html>
Producción:
Ejemplo 2: En el siguiente ejemplo, cambiaremos la posición de la información sobre herramientas con la ayuda de botones.
HTML
<!DOCTYPE html>
<html lang="en">
<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" />
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" />
<script type="module" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
</script>
<script nomodule="" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js">
</script>
<script src="node_modules/@blaze/atoms/dist/blaze-atoms.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="o-container">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>Blaze UI Tooltips</strong>
<br />
<br />
<button class="c-button"
onclick="changePosition('c-tooltip--top')">
Top
</button>
<button class="c-button"
onclick="changePosition('c-tooltip--left')">
Left
</button>
<button class="c-button"
onclick="changePosition('c-tooltip--bottom')">
Bottom
</button>
<button class="c-button"
onclick="changePosition('c-tooltip--right')">
Right
</button>
<br />
<br />
<span class="c-button c-button--info
c-tooltip c-tooltip--top"
aria-label="Welcome to GeeksforGeeks">
Tooltip 2
</span>
</center>
</div>
<script>
let currentPosition = 'c-tooltip--top'
function changePosition(pos) {
$('span').toggleClass(currentPosition)
currentPosition = pos
$('span').toggleClass(currentPosition)
}
</script>
</body>
</html>
Producción:
Referencia: https://www.blazeui.com/components/tooltips/
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA