d3.js NVD3 trigger tooltip manually

Question

I have a bar graph and a table that are made using the same data. I want to make it so that when I hover over a cell in the table, the corresponding bar in the graph is highlighted and shows the tooltip. I'm having a difficult time finding a way to manually trigger the tooltip to show up. .trigger('hover'), .trigger('mouseover'), and .trigger('mouseenter') on the correct bar don't do it.

How can I manually trigger the tooltip to show up for a specific bar in my bar graph?

Answer 1

You can manually show a tooltip by doing:

nv.tooltip.show([200, 400], '<p>Your content goes here</p>');

Then to hide the tooltip do:

nv.tooltip.cleanup();

I only found out how to do it by searching the code. I couldn't find any documentation.

Here's an advanced example for the situation I needed to solve (showing a tooltip on a legend label, using jQuery):

$("#chart svg .nv-series .nv-legend-text").each(function(i, elem) {
    $(elem).hover(function() {
        var offset = $(this).offset();
        // data is my array of objects passed into d3.select("#chart svg").datum(data)
        nv.tooltip.show([offset.left, offset.top], '<p>' + data[i].longLabel + '</p>');
    }, function() {
        nv.tooltip.cleanup();
    });
});

To solve your situation, you could probably do something similar, except select for the individual bar elements.