All geek questions in one place

D3 tooltip pullup in firefox, IE

I draw d3 graphical charts and tooltips attached to circles.

Tooltips work fine in Chrome / Safari, but in Firefox and IE, when you hover over a dot while the tooltip appears, it appears outside the graph / SVG element in the upper left corner of the screen (html element), and not near the point.

Here's how I attach the tooltip:

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

Any advice on what I am doing wrong will be greatly appreciated.

+6
source share
2 answers

This patch adds the proper SVG support for Tips.

+4
source

tipy uses offsetWidth and offsetHeight for elements. It is assumed that such things work on SVG elements, unfortunately, this assumption is incorrect outside of Chrome / Safari.

The CSSOM specification states that offsetWidth / offsetHeight are properties of the html element. It seems that Chrome / Safari put them in their SVG elements, but there is no specification that says this should be so.

You need to either fix the impudent one to be a cross browser, or force the author to do this. Using getTransformToElement and / or getBBox is probably necessary.

+1
source

Source: https://habr.com/ru/post/924541/

More articles:


All Articles