jquery - que - Cómo hacer una información sobre herramientas en un SVG generado por Raphael
que es snap svg (4)
En caso de que alguien busque un ejemplo de tooltip en g Rapahel charts (supongo que podría usarse fácilmente con Rapahel normal también) hice uno que usa div creado dinámicamente ( por lo que no es necesario un plugin de tooltip de tercera parte ) que actúa como una herramienta sobre Gráfico circular
Gráfico de sectores interactivo con información sobre herramientas
Utiliza mousemove y mouseout de raphael ...
Por cierto, utilizo la leyenda como fuente de la información sobre herramientas; por supuesto, no es obligatorio y podría reemplazarse por cualquier otro texto (simplemente reemplace el this.label[1].attrs.text con algún otro texto)
Estoy haciendo un poco de ejercicio pedagógico, convirtiendo XML a SVG con XSLT, Javascript y Raphael. Estoy seguro de que es la manera más difícil ... pero es educativo.
El problema con el que me he encontrado es crear información sobre herramientas. Hasta ahora, he encontrado tres formas de hacer esto:
- La primera forma es usar
.attr({title: "blah"{)en un objeto. Esto funciona, pero no cuenta con el respaldo oficial de Rafael, y el contenido que quiero incluir en la información sobre herramientas puede ser algo largo, lo cual es un problema cuando el sistema operativo de las personas supera la información sobre herramientas antes de que las personas terminen de leerlo. - La segunda forma que he encontrado es la función here . Funciona bien para tener un objeto emergente de Raphael cuando hay un mouseover, pero, por lo que puedo ver, no es posible obtener una información sobre herramientas de apariencia normal.
- Usando el plugin jquery Tooltip . Esto simplemente no parece funcionar. No puedo hacer que Raphael agregue el atributo title a un objeto Y obtener esto para seleccionar ese título. No estoy seguro por qué.
Entonces, lo que me gustaría saber es, ¿cuál es una manera fácil y confiable de agregar información sobre herramientas a los objetos de Rafael de modo que aparezcan cuando las personas colocan el mouse sobre el objeto y desaparecen cuando se desplazan (pero no antes)?
Si usa los atributos de [título], ajustará los elementos con enlaces, lo que facilita el uso de complementos de información sobre herramientas como qtip .
var R = Raphael(''canvas'', 100, 100);
R.path(path).attr({ title: ''Fancy tooltip'' });
$(''#canvas a'').qtip();
Una forma de hacerlo es usar una etiqueta div en la parte superior del papel de Rafael. A continuación, utilice Jquery mousevents junto con fadeIn () y fadeOut (). Creé un ejemplo en jsFiddle. Echar un vistazo
Usé qtip para agregar información sobre herramientas: