JavaScript - Mostrar y ocultar tooltip con javascript

Hola amigos/as, veran tengo un profesor que me ha puesto un ejercicio de javascript, pero el enunciado para mi es mas dificil de entender que resolver el ejercicio en si.

Yo lo he interpretado como creo que es correcto pero aunque mi solucion funciona no se si es lo que pide el ejercicio en verdad:

el enunciado dice asi:

"Implementar una función (usad dwec_tooltip.css si lo veis conveniente)
que dote de tooltip a cualquier elemento HTML, el mensaje a mostrar debe ser obtenido del
atributo title (por defecto, se valorará que sea parametrizable) del elemento HTML. La
función se llamara dwec_tooltip y podrá recibir como parámetro bien o una cadena con el id
del elemento en cuestión al que hacerle el tooltip o bién el nodo DOM donde aplicar el
mismo; como segundo parámetro opcional puede recibir un objeto javascript ({}) con
opciones de configuración (ejemplo: atributo de donde obtener el texto a mostrar → {texto:
'title'}). Añade la opción de retraso para que el tooltip se muestre pasado el número de
milisegundos indicados en esa opción (usad para esto las funciones window.setTimeout y
window.clearTimeout)"


Bien, yo lo he interpretado asi:


codigo css:

.tooltip{

display:none;

width:120px;
height: 30px;
color: #FFFFFF;
background: #000000;

line-height: 20px;
text-align: center;
border-radius: 6px;
font-size:12px;

margin-top: 10px;
margin-left: 0px;
border-top: 8px solid #000000;

opacity: 1;

}


Código Javascript:

function dwec_tooltip_show (id) {

setTimeout(function() {

id.style.display="block";

}, 300);
}



function dwec_tooltip_hide (id) {

setTimeout(function() {

id.style.display="";

}, 300);
}



Código HTML:

<input name="" type="text" placeholder="Apartado" onmouseover="dwec_tooltip_show(tooltip)" onmouseout="dwec_tooltip_hide(tooltip)">

<div class="tooltip" id="tooltip">Contenido bocadillo</div>



Lo hecho funciona bien, pero creo que el enunciado dice que en el input deberia tener un "title", pero claro si pongo un title ahi no me haria falta ninguna funcion que me haga visible el tooltip, ya que la etiqueta "title" ya se encarga de eso.

y tampoco sabria como interactuar con javascritp con setTimeout con la etiqueta "title".

y mucho menos dar estilos css a "title".

y tampoco sabria como pasar el contenido de "title" como parametro a la funcion dwec.tooltip_show.

Si me puedieran ayudar les estaria muy agradecido.

Un saludo.

he seguido investigando y creo que se podria hacer con "getAttribute", pero no tengo idea de como implementarlo para hacer el ejercicio tal como se pide en el enunciado

Buenas:

El codigo no es perfecto del todo pero te puede servir para guiarte:

CSS:

HTML:

En el html solo he utilizado una funcion que es la que pedia dwec_tooltip. Yo pienso que en el codigo javascript tendrias que pensar en primero mostrar el tooltip y pasado un rato ocultarlo, es lo que yo creo...

A la funcion como puedes ver se le pueden pasar dos valores: el primero puede ser o una cadena con el id o bien this que es el objeto DOM en el cual nos encontramos en ese momento. Para las pruebas he hecho el primer input pasandole this (el objeto javascript del input en el cual se encuentra) y como segundo un objeto que tiene una cadena que luego colocamos en el tooltip.

Llamada a la funcion desde el primer input:
dwec_tooltip(this,{title:'esto es un demo1'})

En el segundo input le he pasado solo una cadena que se llama prueba1 que coincide con el id de ese input, pero le paso la cadena para que veas la diferencia. No le paso el objeto con el title asi que la funcion tendra que tomar el title de el atributo title del objeto:

Llamada a la funcion desde el segundo input:
dwec_tooltip('prueba1')

Javascript:

Espero que sirva.

Saludos.

Buahh fenomenal muchas gracias , me ha quedado mucho mas claro, lo he entendido muy bien.

mil gracias por ayudarme Vainas.

Un saludo.