mostrar title al pasar el raton con un mensaje desde javascript

[mensajeescrito]

Hola amigos a ver si me pueden echar una mano con esto:

Tengo un codigo que funciona bien el cual me muestra el contenido que tiene que llevar el "title" extraido de un javascript que he programado y lo sustituye por el contenido del title que tiene por defecto en el input.

PUes bien, el tema esta que dicho mensaje creado en javascript ,que debe aparecer. debe estar dentro de un div

y cuando paso el raton por encima entonces lo que me sale en vez de esto:

"Gracias por pinchar"

me sale esto:

"<div>Gracias por pinchar</div>"

es decir me en el mismo mensaje me salen los divs.

Com opuedo hacer para que no aparezcan los divs como parte del mensaje , para asi poderle dar estilos css?

este es el codigo:

Código HTML:

<input name="campo1" id="campitox" type="text" placeholder="hola" title="mico" />
 

Código Javascript:

document.getElementById("campitox").onmouseover = mostrarMensaje;
            
 
            function mostrarMensaje() {
 
              var mensaje = "--<div>Gracias por pinchar</div>--";             
    
    
              document.getElementById("campitox").title = mensaje;                
            }
 

gracias de antemano.

[Alexis88]

Es incorrecto lo que tratas de hacer. El atributo title solo puede contener texto, de modo que al hacer eso, pues obviamente se va a mostrar el contenido de forma literal.

Si lo que deseas es mostrar un tooltip personalizado, puedes hacerlo con CSS o también con JavaScript.

Saludos

[mensajeescrito]

claro, lo que quiero es poner un fondo al texto del title pero con javascript , no con css.

el problema esta que no se como hacerlo.

se me ocurre hacer a parte un div que seleccionando su id , se muestren ahi el mensaje que le diga el javascript.

seria posible hacer algo como lo que imagino?

[Alexis88]

Si estás apurado, no te hagas más líos y busca algún plugin para hacerlo. Échale un vistazo al segundo de los enlaces que te dejé en el mensaje anterior.

Saludos

[mensajeescrito]

he visto los dos enlaces que me has puesto y son geniales.
pero no creo que a mi profesor le guste la idea de que los utilice, tu ya me entiendes.

alexis, si me dijeras al menos si es factible hacerlo como digo , ya me calentaria la cabeza yo por lo menos para programarlo, sabiendo que de la manera que imagino pudiera hacerse.

[Alexis88]

De poder hacerlo, sí, se puede, pero en este momento estoy por salir. Si más tarde nadie te responde, intentaré ayudarte, aunque podrías avanzar buscando en internet ejemplos con las palabras "Tooltip JavaScript".

Saludos

[mensajeescrito]

Bueno he conseguido lo que comente.

Es decir que poniendome encima de un input se haga visible un div con un mensaje dentro.

EL problema es que ahora lo que necesito es que este mismo codigo sirva para que poniendome encima de cualquier input me muestre su correspondiente comentario en el tooltip.


Este es el codigo , que como digo funciona para un solo id pero necesito que funciona para todos los inputs.

he hecho un intento para que funcione para todos los inputs , dicho codigo comentado aparece en el codigo pero "comentado"

a ver si una manita se agradeceria.

Código CSS:

background:#000000;
            width:150px;    
            height:30px;
            color:#ff0000;
            font-size:16px;
            
            display:none;
        }
 

Código HTML:

<input name="nombre" id="nombre" type="text" placeholder="nombre" />
 
        <input name="apellido" id="apellido" type="text" placeholder="apellido" />
 
        <div id="tooltip"></div>
 

Código Javascript:

document.getElementById("nombre").onmouseover = mostrarMensaje;
            
            document.getElementById("nombre").onmouseout = ocultarMensaje;
 
            //var valores = document.querySelectorAll("#nombre #apellido").onmouseover = mostrarMensaje;
        
            
            
                    function mostrarMensaje() {
 
                          /*
                          switch(variable=valores) {
                          
                            case nombre: document.write("Este es el nombre"); break;
                            case apellido: document.write("Este es el apellido"); break;          
                          }
                          */
 
 
        
                          var mensaje = "Este es el nombre";              
                    
                          document.getElementById("tooltip").innerHTML = mensaje;   
                          
                          document.getElementById('tooltip').style.display = 'block';             
                    }
        
        
        
                    function ocultarMensaje() {
        
                          var mensaje = "";           
                    
                          document.getElementById("tooltip").innerHTML = mensaje;   
                          
                          document.getElementById('tooltip').style.display = 'none';              
                    }
 

[GeekGirl]

Podrías hacer algo así:

Código HTML:

 <input class="inputHover" name="nombre" id="nombre" data-message="Este es el nombre" type="text" placeholder="nombre" />
  <input class="inputHover" name="apellido" id="apellido" data-message="Este es el apellido" type="text" placeholder="apellido" />
  <div id="tooltip"></div>
  <script type="text/javascript"> 
        var allInputs = document.getElementsByTagName('input');

        for (var a = 0; a < allInputs.length; a++) {
          if (allInputs[a].className == 'inputHover') {
            allInputs[a].onmouseover = function() {
              var mensaje = this.getAttribute("data-message");              
        
              document.getElementById("tooltip").innerHTML = mensaje;   
              document.getElementById('tooltip').style.display = 'block';   
            }

            allInputs[a].onmouseout = function() {
              document.getElementById('tooltip').style.display = 'none';     
            }
          }
        }
  </script> 

Lo único que tenés que hacer es agregar la clase inputHover a todos los input que quieras que tengan ese comportamiento, y en data-message el mensaje que quieras que muestren.
Saludos :)

[mensajeescrito]

Simplemente fantastico!!!.

A parte de servirme perfectamente, lo he entendido, ya se hacer algo mas.

Ahora estoy metiendole estilos con css , GEEKGIRL.

y va quedando bien. pero....


como hago para que el div que contiene el mensaje "tooltip", aparezca al lado de cada "input"

cuando se le pase el raton por encima???

Por que ahora solo aparecen los mensajes del tooltip en el misma posicion.

Código CSS:

#tooltip {
        
        background:#000;
        width:150px;
        heigth:30px;    
        color:#ffffff;  
        border-radius:10px;
    }
 

[GeekGirl]

No regalas ni un puntito de karma y hasta pedís que te hagan el CSS? Jaja, vamos, un poco de esfuerzo amigo.

Lo más simple imagino, sería hacer un div por input posicionado donde lo necesites, y mostrar u ocultar ese div de acuerdo a una clase que setees, o a algún data-attribute.

Saludos :)

[mensajeescrito]

Querido/a Geekgirl;

Si hay algo que no me gusta es que me hagan el codigo, no soy de esa clase de gente.

Pido ayuda cuando lo necesito.

de hecho nada mas empezar este hilo puse el codigo que tenia hecho.


Entrando en el problema final del final de este hilo, la solucion que he encontrado mas optima,

la pongo aqui por si a alguien le interesa.

al magnifico codigo que has programado tu se le podria implementar este otro para que el div

donde se muestran los contenidos de cada tooltip se muestren justo donde se precisa al lado de cada input etc.


Se precisa el archivo con la version adecuada de jquery, claro.

Código Javascript:

$(document).bind('mousemove', function(e){
        $('#tooltip').css({
           left:  e.pageX + 20,
           top:   e.pageY + 20
        });
    });
 

esto hace que sea perfecto.

ojala le serva a la comunidad.

Un saludo a todos y en especial a GEEKGRIL por haberme ayudado.