Montada de herramientas JavaScript simple

Una información sobre herramientas es una ventana emergente pequeña e informativa que se muestra cuando un usuario se cierne sobre un elemento, como un botón o texto. Más específicamente, el propósito de una información sobre herramientas es proporcionar información adicional o aclaraciones sobre el elemento en cuestión.

Este artículo demostrará la información sobre herramientas utilizando JavaScript simple.

Cómo crear una información sobre herramientas JavaScript simple?

Para crear una información sobre herramientas con JavaScript, use el "ratón sobre" y "ratón" eventos. Siga los ejemplos a continuación para una mejor comprensión.

Ejemplo 1: Información de herramientas usando JavaScript

En el ejemplo dado, crearemos una información sobre herramientas en JavaScript puro y también peinaremos la información sobre herramientas utilizando el "estilo" atributo.

Primero, cree un texto donde queremos mostrar una información sobre herramientas en el evento Mouseover:

Linuxhint

Obtenga el texto donde aparecerá la información sobre herramientas utilizando el "getElementById ()" método:

var lh = documento.getElementById ("texto");

Ahora, llame al "addEventListener ()"Método al pasar el"ratón sobre"Evento y una función () como parámetro. En la función definida, primero crearemos una información sobre herramientas creando un "div"Elemento, establezca el texto que se mostrará en el flotador y establece algún estilo de la información sobre herramientas utilizando el"estilo" atributo. Finalmente, agregue la información sobre herramientas con el "añadir Niño()" método:

LH.addEventListener ("Mouseover", function ()
var tooltip = documento.createElement ("div");
comedia de herramientas.innerhtml = "Un mejor sitio web para aprender habilidades";
comedia de herramientas.estilo.visibilidad = "visible";
comedia de herramientas.estilo.posición = "absoluto";
comedia de herramientas.estilo.backgroundColor = "RGB (107, 101, 101)";
comedia de herramientas.estilo.padding = "5px";
comedia de herramientas.estilo.borderradius = "3px";
comedia de herramientas.estilo.color = "blanco";
comedia de herramientas.estilo.izquierda = "50%";
comedia de herramientas.estilo.width = "200px";
documento.cuerpo.AppendChild (ToolTip);
);

Aquí, utiliza el "ratón"Evento que eliminará la información sobre herramientas mientras el cursor se alejará del texto:

LH.addEventListener ("mouseOut", function ()
documento.cuerpo.RemoVeChild (ToolTiP);
);

Producción

Ejemplo 2: Información de herramientas usando JavaScript con CSS

También puede crear una información sobre herramientas en JavaScript con CSS.

Para hacerlo, cree un área para mostrar el texto de la información sobre herramientas usando la etiqueta y asignar una ID "#mytooltip":

= "mytooltip">

Obtenga las referencias del texto y la información sobre herramientas utilizando el "getElementById ()" método:

var lh = documento.getElementById ("texto");
var tooltip = documento.getElementById ("myTooltip");

Llame a la información sobre herramientas en el "ratón sobre"Evento estableciendo el texto en la función utilizando el"innerhtml" propiedad:

LH.addEventListener ("Mouseover", function ()
comedia de herramientas.estilo.visibilidad = "visible";
comedia de herramientas.innerhtml = "Un mejor sitio web para aprender habilidades";
);

Ocultar la información sobre herramientas en el "ratón"Evento estableciendo el"visibilidad"Propiedad a"oculto":

LH.addEventListener ("mouseOut", function ()
comedia de herramientas.estilo.visibilidad = "oculto";
);

Crear una identificación "#mytooltip"En la hoja de estilo que diseñará la información sobre herramientas:

#mytooltip
Visibilidad: oculto;
Ancho: 200px;
índice z: 1;
Color de fondo: RGB (107, 101, 101);
Text-Align: Center;
color blanco;
relleno: 5px 0;
Border-Radius: 3px;
Izquierda: 50%;

Como puede ver, la información sobre herramientas se ha implementado con éxito en el texto:

Cómo crear información sobre herramientas usando HTML y CSS?

También puede crear una información sobre herramientas sin JavaScript. En el archivo HTML, cree el texto "Linuxhint", Donde se mostrará la información sobre herramientas mientras se desplaza sobre él. Crear elemento para configurar el texto para la información sobre herramientas dentro del encabezado/texto

etiqueta:

Linuxhint
class = "ToolTiptext">
Una plataforma para aprender habilidades

En la hoja de estilo, cree una clase o una identificación que se asignará a los elementos HTML. Aquí, crearemos una clase "comedia de herramientas"Eso se asigna al encabezado:

.Tooltip
Posición: relativo;
Pantalla: bloque en línea;

Defina una clase "tooltiptext"Para peinar el texto del ToolTip y asignarlo el HTML"" etiqueta:

.ToolTiptext
Visibilidad: oculto;
Ancho: 150px;
Color de fondo: RGB (107, 101, 101);
Color: #fff;
Text-Align: Center;
relleno: 5px 0;
Border-Radius: 3px;
Posición: Absoluto;
índice z: 1;
Abajo: 125%;
Izquierda: 50%;
margen -izquierda: -60px;
Opacidad: 0;
Transición: Opacidad 0.3s;

Colocar "flotar"Efecto con el"comedia de herramientasClase para mostrar la información sobre herramientas sobre el efecto flotante:

.Tooltip: flotante .ToolTiptext
Visibilidad: visible;
Opacidad: 1;

Producción

Hemos compilado todas las instrucciones necesarias relevantes para la información sobre herramientas JavaScript simple.

Conclusión

Para crear una información sobre herramientas con JavaScript, use el "ratón sobre" y "ratón"Eventos, que muestran la información sobre herramientas sobre el flotador en el elemento y lo ocultan cuando se activa el evento mouseut. Para diseñar la información sobre herramientas, use el "estilo"Atributo en JavaScript. En este artículo, demostramos los mejores ejemplos posibles de crear una información sobre herramientas utilizando JavaScript simple, JavaScript con CSS y una información sobre herramientas sin JavaScript.