如何在调用时使用键盘侦听器触发工具提示？ [英] How can I use a keyboard listener to trigger a tooltip when called?

问题描述

我有一个简单的饼图。当您点击饼图时，会显示该楔形的工具提示。

我试图实现SAME功能，但是在饼图的外侧的div元素。

场景：

1. 专注于Cat 1div和hits的用户会显示

ol>



我已经尝试过一些类似于

 的函数ShowTooltip {
 d3.selectAll（'。nvtooltip'）。each（function（）{
 this.style.setProperty（'display'，'block'，'important'）; 
} ; 
}; 
  

但是如果你在 plunkr ，它不会触发任何东西。如何让这些潜水触发它相应的工具提示？

  $（document）.keydown（function（event）{
 //只有在按下回车键时才捕获.myDiv有焦点
 if（event.keyCode === 13& $（'。cat-count'）。is（'：focus'））{
 console.log something'）; 
 ShowTooltip（）; 
} 
}）; 
  




解决方案

我们需要触发饼图部分的相应事件





查看我的Plunk：
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）; 
 //我们的例子中eventName的可能值是mouseover，mouseout 
 event.initMouseEvent（eventName，true，true，window，0，0，0，clientX，clientY）; 
 pieSection.dispatchEvent（event）; 
} 
  

按钮点击调用上述函数：

  TriggerEvent（mouseover，pieSection.node（），offset.left，offset.top）; 
  




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

解决方案

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

这篇关于如何在调用时使用键盘侦听器触发工具提示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！