Información sobre herramientas al pasar el mouse en JavaScript
- Información sobre herramientas de JavaScript
- Información sobre herramientas al pasar el mouse usando HTML y JavaScript
Este artículo discutirá la creación de información sobre herramientas y su visualización al pasar el mouse usando HTML y JavaScript.
Información sobre herramientas de JavaScript
En HTML y JavaScript, podemos crear un cuadro pequeño y alternar su visibilidad como información sobre herramientas. Nos ocupamos de habilitar o deshabilitar la visibilidad de ToolTip mediante el uso de una función personalizada de JavaScript.
Información sobre herramientas al pasar el mouse usando HTML y JavaScript
El evento de desplazamiento se activa cuando colocamos el cursor del mouse sin hacer clic en ningún componente de una página web.
En JavaScript, podemos llamar y alternar el cuadro de información sobre herramientas al pasar el mouse cada vez que el usuario coloca el cursor sobre un elemento, y podemos mostrar la información sobre herramientas como un mensaje emergente.
Podemos crear una función de información sobre herramientas utilizando HTML y CSS. Crear una información sobre herramientas y mostrar texto sobre el elemento ahorrará nuestro espacio inicial en la página web.
Código de ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
.class {
-webkit-user-select: none;
position: relative;
}
.displayText {
position: absolute;
bottom: -230%;
left: 50%;
margin-left: -80px;
width: 160px;
background-color: lightgrey;
text-align: center;
border-radius: 6px;
padding: 8px 0;
visibility: hidden;
}
.displayText::before {
content: "";
border-width: 5px;
border-style: solid;
top: -28%;
left: 35%;
border-color: transparent transparent lightgrey transparent;
position: absolute;
}
.show {
visibility: visible;
}
</style>
</head>
<body>
<h2>DelftStack learning</h2>
<h3>JavaScript open tooltip on hover</h3>
<div class="class" onmouseover="openToolTip()">Hover on me to open ToolTip
<span class="displayText" id="displayText">ToolTip Text</span> <! –– tooltip box and text ––>
</div>
<script>
function openToolTip () {
var tooltipPopup = document.getElementById("displayText");
tooltipPopup.classList.toggle("show"); // toggle the tooltip
}
</script>
</body>
</html>
Producción:
En la fuente html anterior, usamos la etiqueta div <div></div> que crea un cuadro en la página web. La etiqueta <div> define la clase y utiliza la función onmouseover para llamar a la función openToolTip().
Dentro de <div>, usamos el elemento <span> como nuestro texto de información sobre herramientas y definimos el id. En las etiquetas <script> declaramos la función openToolTip() en la que llamaremos al método toggle y pasaremos "show".
Aquí, el CSS se ocupa de la visibilidad de la información sobre herramientas, y usamos las propiedades de CSS para el estilo y el posicionamiento básicos de la información sobre herramientas.