D3.js manual trigger for NVD3 trigger

Question

I have a histogram and a table that are made using the same data. I want to make sure that when you hover over a cell in the table, the corresponding line on the graph is highlighted and displays a tooltip. It’s hard for me to find a way to manually trigger a tooltip..trigger ('hover'),. Trigger ('mouseover') and .trigger ('mouseenter') on the right bar do not do this.

How can I manually launch a tooltip to display a specific line in my histogram?

Answer 1

You can manually show the tooltip by doing the following:

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

Then, to hide the tooltip:

nv.tooltip.cleanup();

I just found out how to do this by doing a code search. I could not find the documentation.

Here is an extended example of a 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 can probably do something similar, with the exception of selecting individual bar elements.

Answer 2

This is how I show / hide / move the tooltip for my own chart (based on other nvd3 charts) for version 1.8.1:

tooltip = nv.models.tooltip();

// config...
tooltip
    .headerEnabled(false)
    .duration(0)
    .valueFormatter(function(d, i) {
        return packedBubble.valueFormat()(d, i);
    });

...

packedBubble.dispatch.on('elementMouseover.tooltip', function(evt) {
    evt['series'] = {
        key: evt.data.name,
        value: evt.data,
        color: evt.color
    };

    tooltip.data(evt).hidden(false);
});

packedBubble.dispatch.on('elementMouseout.tooltip', function(evt) {
    tooltip.hidden(true);
});

packedBubble.dispatch.on('elementMousemove.tooltip', function(evt) {
    tooltip.position({ top: d3.event.pageY, left: d3.event.pageX })();
});

So just use chart.tooltipif you are outside the chart to manipulate it in the same way with hidden () / position () / data ().