Mostrar y ocultar tooltip con javascript

[mensajeescrito]

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:

Código 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.

[mensajeescrito]

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