Kode_12 Kode_12 - 1 year ago 38
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.


  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() {
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');

Answer Source

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

On Button Click call the above function:

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