Javascript: Aparecer elementos al pasar el mouse encima.

Enseguida mostrare el codigo que permita ocultar un contenido para que solo sea mostrado al pasar el mouse encima de algun elemento. Esto puede ser para ver la descripcion de una imagen, la ayuda para un cuadro de texto, etc.

Estas son las funciones que mostraran y ocultaran las ayudas:

function showHelp(id){
        id += 'help';
        document.getElementById(id).style.visibility = 'visible';
    }
    
    function hideHelp(id){
        id += 'help'
        document.getElementById(id).style.visibility = 'hidden';
    }

Asi es como puedes invocarlas:

Nombre   Ingresa aqui tu nombre
    
Correo   Ingresa aqui tu correo
            
    
  Enviar

Como puedes ver la ayuda esta encerrada en etiquetas b y al id le agregamos la palabra 'help'. Por ejemplo en el caso de la ayuda del campo con id name, su ayuda tiene el id namehelp. De esta forma el codigo se vuelve mas facil para copiar y pegar. Ademas estas etiquetas tienen agregado el atributo style='visibility : hidden' que hace que al inicio esten ocultos.

Este es el resultado:



Nombre Ingresa aqui tu nombre

Correo Ingresa aqui tu correo


Enviar