Sugerencia tooltip posicionamiento en d3 en firefox, IE

Question

Estoy dibujando d3 line graphs y tipsy tooltips conectado a los círculos.

La información sobre herramientas funciona bien en Chrome/Safari pero en Firefox e IE cuando se desplaza sobre un punto, mientras aparece la información sobre herramientas respectiva, aparece fuera del elemento gráfico/SVG en la esquina superior izquierda de la pantalla (elemento html) en lugar de al lado del punto.

Esta es la forma en que estoy adjuntando la información sobre herramientas:

jQuery('g circle').tipsy({ 
     gravity: 'w', 
     html: true, 
     title: function() { 
      return this.textContent; 
     } 
    }) 

Cualquier consejo sobre lo que estoy haciendo mal sería muy apreciada.

Answer 1

tipsy usa offsetWidth y offsetHeight en los elementos. Supone que tales cosas funcionan en elementos SVG, desafortunadamente esa suposición es incorrecta fuera de Chrome/Safari.

La especificación CSSOM dice que offsetWidth/offsetHeight son propiedades de elementos html. Parece que Chrome/Safari los ha puesto en sus elementos SVG, pero no hay ninguna especificación que diga que ese debería ser el caso.

Tendrá que arreglar el tipsy para que sea de navegador cruzado o hacer que el autor lo haga. El uso de getTransformToElement y/o getBox es probablemente lo que se necesita.

Answer 2

This parche agrega el soporte adecuado de SVG a Tipsy.