Este artículo demostrará la información sobre herramientas utilizando JavaScript simple.
¿Cómo crear una información sobre herramientas de JavaScript simple?
Para crear una información sobre herramientas usando JavaScript, use el ' ratón sobre ' y ' ratón fuera ' eventos. Siga los ejemplos a continuación para una mejor comprensión.
Ejemplo 1: información sobre herramientas utilizando JavaScript
En el ejemplo dado, crearemos una información sobre herramientas en JavaScript puro y también diseñaremos la información sobre herramientas usando el ' estilo ' atributo.
Primero, cree un texto en el que queramos mostrar una información sobre herramientas en el evento de mouseover:
< identificación h5 = 'texto' > linux h5 >
Obtenga el texto donde aparecerá la información sobre herramientas usando el ' getElementById() ' método:
donde lh = documento. getElementById ( 'texto' ) ;
Ahora, llame al ' agregarEventListener() ” método pasando el “ ratón sobre ” y una función() como parámetro. En la función definida, primero, crearemos una información sobre herramientas creando un ' división ', configure el texto que se mostrará al pasar el mouse y configure algunos estilos de la información sobre herramientas usando el ' estilo ' atributo. Finalmente, agregue la información sobre herramientas usando el ' añadir Niño() ' método:
izq. agregarEventListener ( 'ratón sobre' , función ( ) {era información sobre herramientas = documento. crearElemento ( 'div' ) ;
información sobre herramientas HTML interno = 'Un mejor sitio web para aprender habilidades' ;
información sobre herramientas estilo . visibilidad = 'visible' ;
información sobre herramientas estilo . posición = 'absoluto' ;
información sobre herramientas estilo . color de fondo = 'rgb(107, 101, 101)' ;
información sobre herramientas estilo . relleno = '5 píxeles' ;
información sobre herramientas estilo . bordeRadio = '3 píxeles' ;
información sobre herramientas estilo . color = 'blanco' ;
información sobre herramientas estilo . izquierda = '50%' ;
información sobre herramientas estilo . ancho = '200px' ;
documento. cuerpo . añadir Niño ( información sobre herramientas ) ;
} ) ;
Aquí, utilice el “ ratón fuera ” evento que eliminará la información sobre herramientas mientras el cursor se alejará del texto:
izq. agregarEventListener ( 'ratón fuera' , función ( ) {
documento. cuerpo . removeChild ( información sobre herramientas ) ;
} ) ;
Producción
Ejemplo 2: información sobre herramientas utilizando 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 asigne una identificación ' #myTooltip ”:
< ID de tramo = 'mi información sobre herramientas' > durar >Obtenga las referencias del texto y la información sobre herramientas usando el ' getElementById() ' método:
donde lh = documento. getElementById ( 'texto' ) ;era información sobre herramientas = documento. getElementById ( 'mi información sobre herramientas' ) ;
Llame a la información sobre herramientas en el ' ratón sobre ” configurando el texto en la función usando el “ HTML interno ' propiedad:
izq. agregarEventListener ( 'ratón sobre' , función ( ) {información sobre herramientas estilo . visibilidad = 'visible' ;
información sobre herramientas HTML interno = 'Un mejor sitio web para aprender habilidades' ;
} ) ;
Oculte la información sobre herramientas en el ' ratón fuera ” evento configurando el “ visibilidad ” propiedad a “ oculto ”:
izq. agregarEventListener ( 'ratón fuera' , función ( ) {información sobre herramientas estilo . visibilidad = 'oculto' ;
} ) ;
Crear una identificación “ #myTooltip ” en la hoja de estilo que aplicará estilo a la información sobre herramientas:
#myTooltip {visibilidad : oculto ;
ancho : 200px ;
Con - índice : 1 ;
fondo - color : RGB ( 107 , 101 , 101 ) ;
texto - alinear : centro ;
color : blanco ;
relleno : 5px 0 ;
borde - radio : 3 píxeles ;
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 ' linux ”, donde se mostrará la información sobre herramientas mientras se desplaza sobre él. Cree el elemento para establecer el texto de la información sobre herramientas dentro de la etiqueta de encabezado/texto :
linux
< durar clase = 'texto de información sobre herramientas' >
Una plataforma para aprender habilidades
durar >
h5 >
En la hoja de estilo, cree una clase o una identificación que se asignará a los elementos HTML. Aquí, crearemos una clase “ información sobre herramientas ” que se asigna al encabezamiento:
. información sobre herramientas {posición : relativo ;
mostrar : en línea - bloquear ;
}
Definir una clase “ texto de información sobre herramientas ” para diseñar el texto de la información sobre herramientas y asignarle el HTML “
visibilidad : oculto ;
ancho : 150px ;
fondo - color : RGB ( 107 , 101 , 101 ) ;
color : #fff ;
texto - alinear : centro ;
relleno : 5px 0 ;
borde - radio : 3 píxeles ;
posición : absoluto ;
Con - índice : 1 ;
abajo : 125 %;
izquierda : 50 %;
margen - izquierda : - 60 píxeles ;
opacidad : 0 ;
transición : opacidad 0.3s ;
}
Colocar ' flotar ” efecto con el “ información sobre herramientas ” class para mostrar la información sobre herramientas en el efecto de desplazamiento:
. información sobre herramientas : flotar texto de información sobre herramientas {visibilidad : visible ;
opacidad : 1 ;
}
Producción
Hemos compilado todas las instrucciones necesarias relevantes para la información sobre herramientas de JavaScript sin formato.
Conclusión
Para crear una información sobre herramientas usando JavaScript, use el ' ratón sobre ' y ' ratón fuera ”, que muestra la información sobre herramientas al pasar el mouse sobre el elemento y la oculta cuando se activa el evento mouseout. Para aplicar estilo a la información sobre herramientas, utilice el botón ' estilo atributo ” en JavaScript. En este artículo, demostramos los mejores ejemplos posibles de cómo crear una información sobre herramientas utilizando JavaScript simple, JavaScript con CSS y una información sobre herramientas sin JavaScript.