3 * Created by onvelocity on 2/22/16.
10 import '../styles/TooltipManager.scss'
12 class TooltipManager
{
14 static addEventListeners(element
= document
.body
) {
15 TooltipManager
.element
= element
;
16 TooltipManager
.removeEventListeners();
17 TooltipManager
.element
.addEventListener('mousedown', TooltipManager
.onScrollRemoveTooltip
, true);
18 TooltipManager
.element
.addEventListener('scroll', TooltipManager
.onScrollRemoveTooltip
, true);
21 static removeEventListeners() {
22 if (TooltipManager
.element
) {
23 TooltipManager
.element
.removeEventListener('mousedown', TooltipManager
.onScrollRemoveTooltip
, true);
24 TooltipManager
.element
.removeEventListener('scroll', TooltipManager
.onScrollRemoveTooltip
, true);
28 static onScrollRemoveTooltip() {
29 TooltipManager
.hideTooltip();
32 static showTooltip(dom
, timeout
= 2500) {
33 TooltipManager
.hideTooltip();
34 const data
= d3
.select(dom
).attr('data-tip');
35 const tip
= d3
.select(TooltipManager
.element
).selectAll('.tooltip-indicator').data([data
]);
36 const rect
= dom
.getBoundingClientRect();
37 // position is handled fairly well by CSS for the bottom (default) position
38 // new code will be needed to support other positions, e.g. top, left, etc.
42 'pointer-events': 'none',
43 top
: rect
.bottom
+ 'px' ,
44 left
: (rect
.left
+ (rect
.width
/ 2)) + 'px'
46 const enter
= tip
.enter('div').append('div').classed('tooltip-indicator', true);
47 enter
.append('i').classed('tooltip-indicator-arrow arrow-up', true);
48 enter
.append('span').classed('tooltip-indicator-content', true);
49 tip
.style(position
).transition().style('opacity', 1);
50 tip
.select('span').html(d
=> d
);
52 TooltipManager
.timeoutId
= setTimeout(() => tip
.transition().style('opacity', 0), timeout
);
57 static hideTooltip() {
58 clearTimeout(TooltipManager
.timeoutId
);
59 d3
.selectAll('.tooltip-indicator').remove();
64 TooltipManager
.addEventListeners();
66 export default TooltipManager
;