Kode_12 Kode_12 - 4 months ago 8
Javascript Question

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

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

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);
Comments