Tooltips with "svg:title"

[Andrej Kastrin]

Dear all,

I finally find awesome library for network visualization ...  I went through basic examples found on the web and getting started with more complex project now. For code reproducibility purposes I will not paste my code but refer the reader to the similar example here: http://bl.ocks.org/950642

I would like to display a tooltip (d.name) on mouseover even on nodes. I add the following code to the example above:

node.append("svg:title")
        .attr("class","circle")
        .text(function(d) { return d.name; });

and jQuery block:

 $('circle').tipsy({
    html: true,
    gravity: 'nw',
  });

Tooltips are displayed but with no content ("undefined").

Many thanks in advance for any tips and/or pointers.

Best, Andrej

[Justin Donaldson]

Hi Andrej,

Try using my fork of tipsy that works for svg elements:

https://github.com/bigmlcom/tipsy

Here's a version of the force directed layout with the new tipsy labels:
http://bl.ocks.org/1211706

Best,
-Justin

--
Justin Donaldson, BigML, Inc.
o: 313-31BIGML | c: 919-BUZZJJD

[Andrej Kastrin]

Hi Justin,

Thanks for your tip. Works like a charm.

Best, Andrej

[Mike Bostock]

Works for me:

http://bl.ocks.org/1212197

I think historically there was a bit of confusion regarding how to
interpret svg:title and svg:desc elements. In the past, I've found it
more reliable to use an anchor tag (svg:a) with an xlink:title
attribute, rather than using svg:title elements. But svg:title seems
to work on Chrome, Safari and Firefox these days, at least.

You can also use the CSS :hover class to toggle label visibility. For
example, to hide labels that aren't being hovered, say:

.node:not(:hover) .nodetext {
display: none;
}

If you don't want to use the :not psuedo-class, you could also say
something like:

.nodetext {
display: none;
}
.node:hover .nodetext {
display: inherit;
}

Live example:

http://bl.ocks.org/1212215

Mike

[Justin Donaldson]

Thanks for the tips, I do like sticking with pure svg elements where possible.

I gave up trying to use svg:text because they are difficult to style or make behave like a proper popup tooltip.  It would often show up outside of the viewport, or it would show up behind another element.  Neither of those are really a problem in this example since you can just reposition the nodes. 

The regular svg title elements are fine for defaults.  They just look a little cheap next to the rest of the visualization in many cases.

Best,
-Justin

[wimdows]

So, if someone complains he/she can't see the tooltips in one or more
of the major browsers, the problem lies with them, not with the code.
(Given that they do work in all browsers on other computers.)

I´m guessing it could be a matter of having outdated browser versions
installed(?)
Or could it be for some other (known/common) cause?

Regards,

wim

[Justin Donaldson]

Wim,

If you're using the svg:title approach, there's a few browsers that won't automatically turn those into a popup tooltip.  I can't find which browsers/versions won't do this, so any information you have there might be useful.

Best,
-Justin

[wimdows]

Actually, I don't have any more on this. I was owndering myself. Sorry
'bout that.

[Chris Hunter]

I had issues with Firefox 3.6 and IE8 with SVGWeb both not showing svg:title elements as tooltips. I ended up rolling a solution based on an HTML div and mouseover/out event handling.

[wimdows]

Funny. I never had any trouble with tool tips in any version of IE.

[Kyle Foreman]

I've been adding a 'title' attribute to my svg (or html) elements and then using the poshytip jQuery extension to spruce them up, and it's worked quite well for me. It's quite similar to tipsy, but it dealt with formatting inside the tips more easily in my case.

[Justin Donaldson]

Do you have a demo of this working?  The author doesn't appear to be using bbox(), and I didn't think jquery handled svg element widths appropriately.

Best,
-Justin

On Thu, Oct 6, 2011 at 6:31 AM, Kyle Foreman <kylef...@gmail.com> wrote:

I've been adding a 'title' attribute to my svg (or html) elements and then using the poshytip jQuery extension to spruce them up, and it's worked quite well for me. It's quite similar to tipsy, but it dealt with formatting inside the tips more easily in my case.

[Chakravarthy]

Hi,

I came across this thread on google search and was wondering if
someone could throw some light on a problem related to svg titles :

I have a svg file of a scatter plot; each data-point in this plot has
a title. Is there a way to locate the data point by searching for
title ?

some thing like, press ctrl+F in firefox, type title-text and find the
data-point in scatter plot.

Example :

In this figure (http://bl.ocks.org/1212215), I would type "pontmercy"
in (ctrl+F) search bar and the title of corresponding smiley will get
automatically highlighted. Is it possible to do it ?

thanks in advance
Chakravarthy

---------- Forwarded message ----------
From: Justin Donaldson <donald...@bigml.com>
Date: Oct 7 2011, 1:54 am
Subject: Tooltips with "svg:title"
To: d3-js

Do you have a demo of this working?  The author doesn't appear to be
using
bbox(), and I didn't think jquery handled svg element widths
appropriately.

Best,
-Justin

On Thu, Oct 6, 2011 at 6:31 AM, Kyle Foreman <kylefore...@gmail.com>

[Mike Bostock]

> I have a svg file of a scatter plot; each data-point in this plot has
> a title. Is there a way to locate the data point by searching for
> title ?

I don't think svg:title elements are searchable, but svg:text elements
are (at least in Chrome, though they don't light up yellow). You could
also use HTML elements with position:absolute on top of your
scatterplot, and search that way.

Or, you could implement this with a custom search box in JavaScript.
For example, see Bootstrap's typeahead component:

http://twitter.github.com/bootstrap/javascript.html#typeahead

Mike

[Yiou Wang]

Hello,

Everyone has problem using tipsy.js with asp.net?

I can just show a line of text on the top of the page, but not as tipsy.

However the svg:title works. But I can't set the style =(

在 2011年9月12日星期一UTC+2下午3时03分11秒，Andrej写道：