How to trigger tooltip when hovering over a button outside the chart?

[jamiewaese]

I'm using a d3 circle packing chart and have applied the d3-tips to the various circles with the .on('mouseover', tip.show) command. It works very nicely!

But elsewhere on the page I have a list of the names of all the elements displayed in the chart, and when the user hovers over them, I'd like to trigger the d3-tips over their respective circles on the chart. To say it again with different words, I want to trigger the tooltips from elsewhere on the page, not just when mousing over shapes in the d3 chart.

I tried tricking the .on('mouseover', tip.show) attached to the individual shapes via jQuery's mouseover() command, as in: $('#circle03').mouseover(); but it doesn't work... and it also produces a Uncaught RangeError: Maximum call stack size exceeded error.

Each of my circles has a unique ID tag such as circle01, circle02, circle03. Do you have any tips? Could it be something simple like: d3.tips.$('circle03').tip.show

[caged]

Check out the explicit target example. Something like:

circle = svg.select('circle')
button = $('#button')
button.on 'mouseover', ->  tip.show(data, circle)

[jamiewaese]

I don't quite follow. My chart is in a div on the page called 'Phylomap'. I want to use jQuery when the user hovers over a separate list (outside the d3 div) to trigger a tooltip associated with a circle in the chart with the ID tag 'PhylomapNode2'

I tried this:

$('#Phylomap').svg.select('circle').tip.show("hello", 'PhylomapNode2');

But I get a TypeError: Cannot read property 'select' of undefined. The tip works as expected when hovering over the shape within the chart. I want to trigger it from somewhere else. I'd prefer not putting the tip data in ("hello") as it has already been created and formatted when d3 built the chart.

I don't understand the syntax of the instruction below:

button.on 'mouseover', -> tip.show(data, circle)

Is there an old-school JavaScript or jQuery way to trigger the tip, something a relative newbie can understand? :)

Thanks.

On 2015-02-12, at 11:51 AM, Justin Palmer wrote:

Check out the explicit target example. Something like:

circle = svg.select('circle') button = $('#button') button.on 'mouseover', -> tip.show(data, circle) — Reply to this email directly or view it on GitHub.