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?

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?

• javascript
• jquery
• d3.js
• nvd3.js

2 Answers 2

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.

Here's how I show/hide/move the tooltip for my custom 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.tooltip if you're outside the chart to manipulate it in the same way with hidden()/position()/data().