Geek Answers Handbook

How can I use a keyboard listener to trigger a tooltip on a call?

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

I am trying to implement the same functionality, but on the outside div elements of a pie chart.

Scenario:

  • A user who focuses on the "Cat 1" div and shows hits displays a tip for the Cat 1 wedge

  • A user who focuses on the Cat 2 div and shows hits displays a tip for the Cat 2 wedge

  • A user who focuses on the Cat 3 div and shows hits displays a tip for the Cat 3 wedge

I tried something like:

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

plunkr, . ?

$(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();
    }   
});
+1
2

, , .

: http://plnkr.co/edit/GP9h6eEe4DE8MM9jXolc?p=preview ( ) http://plnkr.co/edit/MM5nvJ?p=preview ( Div)

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

"." :

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

keydown :

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

, activeElement:

$(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();
    }   
});

, CSS, . : display: none; opacity: 0. jQuery:

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

D3 jQuery. D3 , . plunkr: http://plnkr.co/edit/qNQfdpCMWXOypSqczXXi?p=preview

+1

More articles:


All Articles