2

I have tipsy tooltips for svg elements (generated with d3). I was having trouble getting them to show up next to the cursor in Firefox, so I followed the patch linked to in this answer Tipsy tooltip positioning on d3 in firefox, IE which fixed most of the issue.

However, I use this CSS rule to create rings around certain SVG elements:

.t {
    cursor: default;
    stroke: #000000 !important;
    stroke-opacity: 0.7;
    stroke-width: 7px;
}

For these elements, in FF28, tipsy is setting the tool tip at the top left of the element:

enter image description here enter image description here

Is there a (moderately painless) work around? A way to modify tipsy? Or different CSS that I could use to get the same effect?

Community
  • 1
  • 1
bernie2436
  • 22,841
  • 49
  • 151
  • 244
  • I like to answer, but I didnt understand! – Mohammad Kermani May 06 '14 at 03:48
  • I can't see any way in which that CSS would affect the calculation of the position. If anything, the tooltip should be closer to the circle because it won't factor in the width of the stroke. What else is unique about the elements for which the tooltip position is incorrect? What sort of transforms to do you use on the circles or their ancestors? – AmeliaBR May 06 '14 at 18:17

1 Answers1

1

SVG has many of the same properties as html which often makes it seem like it's cross compatible, but as I've learnt the hard way; you'll get really far and then get a kick in the nuts as something that looks simple doesn't work at all :-)

The patch you mentioned appears to use 'getBBox().width', which looks like a sensible addition, but initially when looking over tipsy it doesn't mention official SVG support.

So at first, I would say that you should probably use a tooltip plugin with official support.

However...

I saw that the original author of that patch did a pull request which wasn't pulled into the main project, but was pulled into another person's fork.

The issue has the comment:

"...we should pull it into our version since we're mostly using tipsy on SVG anyway."

So perhaps use this version of tipsy by enjalot instead as it sounds as though svg support is important to them.

Alex KeySmith
  • 16,657
  • 11
  • 74
  • 152