Support Hover Tooltips

[GoogleCodeExporter]

SVG Web should support tooltips when hovered.  Sadly the state of this
across SVG-enabled browsers is very muddled.

What Opera (and Batik I think) does:
------------------------------------

The SVG spec says that <title> elements should be displayed as tooltips. 
Currently only Opera supports this:

<rect ...>
  <title>This is the tooltip</title>
</rect>

What Firefox does:
------------------

If an element has a xlink:title attribute, that is displayed as the tooltip:

<rect xlink:title="Firefox's tooltip" .../>

What Safari does:
-----------------

Only xlink:title attributes on links (<a>) are displayed as tooltips:

<a xlink:title="Safari's tooltip">
  <rect .../>
</a>

============================

I believe we should target what Opera does and display a tooltip if there
is a <title> element.

Original issue reported on code.google.com by codedr...@gmail.com on 21 Apr 2009 at 3:11

[GoogleCodeExporter]

A modified version of sruby's bloglines file as a test case.  Ideally svgweb 
should
show "A Proper Tooltip" when the rectangle is hovered.  Note the use of
pointer-events="none" on the <text> element too.

Original comment by codedr...@gmail.com on 21 Apr 2009 at 3:14

Attachments:

• bloglines.svg

[GoogleCodeExporter]

What Batik does:
----------------
Shows <title> and <desc> in a box with <desc> under title.

What both Firefox and Webkit also do that is very wrong:
---------------------------------------------------
Take the first <title> element anywhere in the document and show that in the 
title 
bar of the browser window.

Take a look at http://svg-whiz.com/svg/Tooltip2.svg for an alternative, which 
works 
everywhere but svgweb. It is javascript that creates event handlers for mouse 
events, 
and displays its own tooltips based on the <title> and <desc> attributes of the 
target of the mouse events. With some bug fixes / enhancements to svgweb, and / 
or 
changes to the svg-whiz code, this technique can work within svgweb. I will 
create 
separate Issues for each issue I find as I attempt to make it work within 
svgweb.

Original comment by jonat...@gmail.com on 12 Aug 2009 at 8:41

[GoogleCodeExporter]

jonathaz:

It seems that there's some confusion here: Firefox and Webkit generally don't 
support
the "title" and "desc" attributes. Using the root element's title as the 
document
title makes sense and is a somehow different thing [1].

Actually, I've been thinking about this for a while and also wanted to 
implement a
script fallback for SVG implementations not supporting "title"/"desc". One may 
take a
look at a behavior proposal [2] and at another (somehow old but with a few neat
ideas) script implementation [3].

[1] http://www.w3.org/TR/SVG/struct.html#TitleElement
[2] 
http://www.w3.org/Graphics/SVG/IG/wiki/Accessibility_Activity#Title_As_Tooltip
[3] http://www.mecxpert.de/svg/tooltips.html

Original comment by helder.magalhaes on 13 Aug 2009 at 10:42

[GoogleCodeExporter]

helder, just to clear up any confusion - 

Neither Firefox nor Webkit currently support tooltips via <title> or <desc>. 
But if 
you use <title> _anywhere_ (not just the root!) in the SVG DOM, they will both 
take 
the first instance, and use that as the title of the _browser_ window. Like I 
said 
its very wrong.

[3] looks to be a very similar implementation to the link I posted 
(svg-whiz.com). It 
didn't work for me in either Firefox or Chrome.

Original comment by jonat...@gmail.com on 19 Aug 2009 at 2:56

[GoogleCodeExporter]

jonathanz,

Thanks for clearing that up: I never noticed that _anywhere_ within the document
which really sounds like broken behavior IMO also. ;-)

Yeah, [3] is currently broken as it is back from the days when only ASV was 
available
(uses a few ASV-specific APIs). Shouldn't be hard to fix it, and I specially 
like the
unresizable logic which is there (apparently partially) implemented, which makes
sense IMHO (tooltips should be displayed in screen coordinates, not document
coordinates which would display too small for large documents scaled to window 
size,
for example). I which I had the time to pick it up, but I _do_ have it in my 
TODO
list for whenever I have a few spare hours. :-)

Original comment by helder.magalhaes on 19 Aug 2009 at 8:19

[GoogleCodeExporter]

helder,

The svg-whiz implementation does the same thing with the scale. Every time it 
updates 
it looks at the currentScale and currentTranslate of the svgroot and adjusts 
accordingly. I believe [3] is doing the equivalent via an event handler. That 
may be 
more efficient.

Another thing I liked about [3] vesus the svg-whiz one is that it makes the 
tooltip 
element via the DOM. I will look at [3] a little more closely. I had to make 
some 
changes to the svg-whiz implementation to suit my needs, The main issue I had 
with it 
was that it would walk the hierarchy the wrong direction looking for a tooltip 
to 
display. So it would apply a tooltip defined at element A to A's ancestors 
(that are 
lacking tooltips), but not to A's decendants. When everything has a tooltip 
like in 
the svg-whiz example, it works fine.

The two things I really liked about the svg-whiz implementation were that it 
worked 
in every svg viewer / browser I tried it in (except for svgweb), and that it 
displays 
both the <title> and <desc> in the tooltip, similar to the way Batik squiggle 
does. I 
am making tooltips on top of charts and use both values.

Original comment by jonat...@gmail.com on 20 Aug 2009 at 2:06

[GoogleCodeExporter]

Original comment by bradneub...@gmail.com on 20 Oct 2009 at 12:12

• Added labels: Priority-Low
• Removed labels: Priority-Medium

[GoogleCodeExporter]

Hi folks,

First of all, thanks for all the GREAT work you guys are doing.  I have been 
very impressed with SVGWeb and hope to use it to create some great training 
examples for kids using "Dynamic Graphs".

It looks like the hover tooltips currently only work except on IE (using 
flash), is this correct?

So something like:

I have tried using:

<a xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="view-details.xq?id=1" 
title="Test of Hover" alt="Test of Hover">
   <rect fill="red" x="0" y="0" height="20px" width="60px"/>
</a>

Does not seem to work.  

Is there any way I could help out trying to get this to work?  I am glad to 
help out testing.

- Dan

Original comment by dan.mccr...@gmail.com on 24 Feb 2011 at 5:37

[GoogleCodeExporter]

Any workaround suggestions would also be appreciated.  Even if I have to write 
JavaScript.

Original comment by dan.mccr...@gmail.com on 24 Feb 2011 at 5:54

[GoogleCodeExporter]

Hi all,

You should use xlink:title="Test of Hover" and not title="Test of Hover".
This works in Chrome and Firefox.

- Carlos

Original comment by car.mor...@gmail.com on 28 Feb 2011 at 2:58

[GoogleCodeExporter]

Thanks for the suggestion and yes I did try putting the title attribute in the 
xlink namespace. But it looks like it still does not work under IE.

Is there anyone that could help me find a workaround?  Even a JavaScript 
version would be very helpful.  I will even purchase beer at the next SVG 
conference!

Thanks - Dan

Original comment by dan.mccr...@gmail.com on 15 Mar 2011 at 5:49

[GoogleCodeExporter]

Does anyone have any idea when hover-text (and tool tips) will work under IE?  
I would be glad to help out if someone could give me some guidance on how to 
begin.

Original comment by dan.mccr...@gmail.com on 11 Aug 2011 at 8:54

[GoogleCodeExporter]

Another vote for supporting tool tips.  When using this (wonderful product) for 
visualizing data being able to provide the reader with additional data based on 
a mouse hover is a major win. 

Original comment by mike...@gmail.com on 5 May 2012 at 2:39

[GoogleCodeExporter]

Is this project still active?  I have seen very few updates.

Original comment by dan.mccr...@gmail.com on 5 May 2012 at 7:57