JavaScript - Mostrar y ocultar tooltip con javascript

   
Vista:

Mostrar y ocultar tooltip con javascript

Publicado por Sam (95 intervenciones) el 04/01/2015 19:57:07
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.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Mostrar y ocultar tooltip con javascript

Publicado por sam (95 intervenciones) el 05/01/2015 09:28:24
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
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas

Mostrar y ocultar tooltip con javascript

Publicado por Vainas (239 intervenciones) el 05/01/2015 12:20:55
Buenas:

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

CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.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;
 
}

HTML:
1
2
3
<input name="" type="text" placeholder="Apartado" onmouseover="dwec_tooltip(this,{title:'esto es un demo1'})">
 <input id="prueba1" name="" title="demo2" type="text" placeholder="Apartado" onmouseover="dwec_tooltip('prueba1')">
<div class="tooltip" id="tooltip"></div>

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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
id = document.getElementById("tooltip");
 
function dwec_tooltip(element, options){
//Aqui puedes comprobar si el primer argumento que le pasas es una cadena y si es asi tendras que
//usar la function getElementById para recuperar el objeto DOM del elemento
    if(typeof element == "string"){
    element = document.getElementById(element);
    }
//Aqui compruebas si el primer argumento es un objeto. Si es asi en realidad no tendrias que hacer nada mas.
    if(typeof element == "object"){
    element = element;
    }
//Ya que tenemos el elemento vamos a tomar su atributo y lo vamos a colocar dentro del div del tooltip
// para poder mostrar un title diferente por cada input
    atributo = element.getAttribute("title");
// Si existe un segundo argumento y es un objeto vamos a obtener de este el title y lo vamos a colocar dentro del div
//del tooltip asi se puede personalizar el title.
    if(typeof options == "object"){
        atributo = options.title;
    }
    id.innerHTML = atributo;
//Por ultimo mostramos y ocultamos el div.
//No ha quedado muy bien esta parte asi que sera cosa de revisarlo.
    setTimeout(function() {
        id.style.display="block";
    }, 300);
    setTimeout(function() {
        id.style.display="none";
    }, 1000);
}

Espero que sirva.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

Mostrar y ocultar tooltip con javascript

Publicado por Sam (95 intervenciones) el 12/01/2015 13:52:16
Buahh fenomenal muchas gracias , me ha quedado mucho mas claro, lo he entendido muy bien.

mil gracias por ayudarme Vainas.

Un saludo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar