How can I use a keyboard listener to trigger a tooltip when called?

Question

I have a simple pie chart . When you click on a pie wedge, a tooltip for that wedge displays.

I'm trying to implement the SAME functionality, but on div elements OUTSIDE of the pie chart.

Scenario:

1. User who is focused on the 'Cat 1' div and hits enter displays the tooltip for the Cat 1 wedge

2. User who is focused on the 'Cat 2' div and hits enter displays the tooltip for the Cat 2 wedge

3. User who is focused on the 'Cat 3' div and hits enter displays the tooltip for the Cat 3 wedge

I have tried something along the lines of:

function ShowTooltip() {
    d3.selectAll('.nvtooltip').each(function(){
        this.style.setProperty('display', 'block', 'important');
    });
};

But if you see in the plunkr , that doesn't trigger anything. How can I make these dives trigger it's corresponding tooltip?

$(document).keydown(function(event) {
    // Capture only if enter key is pressed and .myDiv has focus
    if (event.keyCode === 13 && $('.cat-count').is(':focus')) {
        console.log('do something');
        ShowTooltip();
    }   
}); 

Answer 1

We need to trigger the corresponding events of pie section when we click on a button in order to show the tooltip.

Check out my Plunk: http://plnkr.co/edit/GP9h6eEe4DE8MM9jXolc?p=preview (using Buttons) http://plnkr.co/edit/MM5nvJ?p=preview (Using Div Elements)

        function TriggerEvent(eventName, pieSection, clientX, clientY) {
            var event = document.createEvent("MouseEvent");
            // possible values for eventName for our example are mouseover,mouseout
            event.initMouseEvent(eventName, true, true, window, 0, 0, 0, clientX, clientY);
            pieSection.dispatchEvent(event);
        }

On Button Click call the above function:

TriggerEvent("mouseover", pieSection.node(), offset.left, offset.top);

Answer 2

You can simply set the listener of the keydown event to the element you want:

$('.myDiv').keydown(function(event) {
    if (event.keyCode === 13) {
        console.log('do something');
        ShowTooltip();
    }   
});

Or you use your approach and check if the activeElement is your desired one:

$(document).keydown(function(event) {
    // Capture only if enter key is pressed and .myDiv has focus
    if (event.keyCode === 13 && $(document.activeElement).is('.myDiv')) {
        console.log('do something');
        ShowTooltip();
    }   
});

---

EDIT To display the toolbox, you need to manipulate the CSS properties which hide the toolbox element. These are: display: none; and opacity: 0 . You can do this with jQuery:

$('.toolbox').css('opacity', 1).css('display', 'block');

However, I would advise against such a manipulation of a D3 toolbox with jQuery. Take a look at the docs of D3 and find out how to display a toolbox programmatically. Here are the changes in a plunkr: http://plnkr.co/edit/qNQfdpCMWXOypSqczXXi?p=preview