hacer un tooltip en un canvas

[oms02]

Hola a todos.

He realizado una gráfica en canvas (típica gráfica de puntos que se unen mediante lineas).

Ahora quiero poner un tooltip al pasar por el ratón encima del punto. Y claro...me encuentro con un problemón ya que en el punto no hay ningún elemento del DOM. No es mas que un simple circulo de un determinado color.

He estado mirando por la red sobre este asunto y no he encontrado nada al respecto, entendiendo por "nada", ningún tutorial/codigo que explique como generar un simple tooltip en un canvas. Todo lo que encuentro son plugins o frameworks ya hechos para generar estos tooltips. La idea de usar estos, en un principio no me agrada, ya que al principio usaba una libreria gráfica para generar estos gráficos y el motivo de "desecharla" fue porque dicha libreria (flot), al igual que los frameworks son muy completas (y pesadas) y no utilizaba casí en absoluto el potencial de ést@s, por lo que decidí realizar mi propio gráfico (ahorrando una barbaridad de lineas de código).

Os pediría ayuda para que me deis alguna idea de como generar dichos tooltips. Ni siquiera necesito/pido código, tan solo una idea con la que empezar a trabajar.

Muchas gracias por vuestra atención.

Un saludo.

[Tecna]

Buenas,

tendrás que detectar las coordenadas del ratón respecto al canvas (no respecto a la ventana), compararlo con los puntos o áreas de la gráfica donde quieres que se vea el tooltip y cuando se cumpla la condición, mediante el evento, mostrar el texto, salvando antes el estado del lienzo para restaurarlo después.

[oms02]

Ok, muy bien.

Lo que me ocurre es que estoy teniendo problemillas para poder referenciar bien el elemento.

Código Javascript:

var tooltip = $("<span id='tooltip'></span>");
 
$('#canvas').mousemove(function(e){
var cx = this.offsetLeft;//posicion del canvas.
var cy = this.offsetTop;//posicion del canvas.
var rx = e.pageX;
var ry = e.pageY;
for(i=0;i<=num-1;i++){
    if((rx-dx)==parseInt(xdato[i]) && (ry-dy)==parseInt(ydato[i]))
        {$(this).after(tooltip).next().css({"top":ry+"px","left":rx+"px"}).fadeIn();}
    else
        {$("#tooltip").fadeOut();}
 
}
 
});
 

No encuentro otra manera que escoger como selector el propio elemento canvas y hacer uso de los metodos after() y next().

Habría otra manera de poder crear el tooltip de una manera "más limpia"??

(pido disculpas por meter aquí jquery pero es que no consideraba muy correcto crear otro post y copiar el mismo problema).

Muchas gracias. Un saludo.

[Tecna]

Buenas,

lo siento pero yo no uso librerías pero por lo que entiendo de tu código creo que vas bien encaminado. El elemento al que hay que asociar el evento es el canvas pero yo no lo haría con onmousemove porque la acción de mostrar el tooltip quieres que se haga justo cuando el ratón no se mueva, como son sólo puntos sería más sencillo asociarlo a onclick.

El elemento span sería mejor tenerlo creado en el html y con sus estilos en la hoja de estilos donde estén los demás (display none y position absolute entre otros), es más límpio al estar el código más ordenado y con javascript sólo cambiarias su posición y podrías acceder a él a través del DOM para con innerHTML cambiar el contenido.

No se si has tenido en cuenta el posible desplazamiento del documento al hacer scroll a la hora de calcular las coordenadas del ratón.

[oms02]

Ha salido perfecto. Muchas gracias!