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.