3 * Created by onvelocity on 2/22/16.
10 import '../styles/TooltipManager.scss'
12 class TooltipManager
{
14 static addEventListeners(element
= document
.body
) {
15 if (element
=== TooltipManager
.element
) {
18 // remove listeners for current element
19 TooltipManager
.removeEventListeners();
20 TooltipManager
.element
= element
;
22 // make sure new element is clean
23 TooltipManager
.removeEventListeners();
24 TooltipManager
.element
.addEventListener('mousedown', TooltipManager
.onScrollRemoveTooltip
, true);
25 TooltipManager
.element
.addEventListener('scroll', TooltipManager
.onScrollRemoveTooltip
, true);
29 static removeEventListeners() {
30 if (TooltipManager
.element
) {
31 TooltipManager
.element
.removeEventListener('mousedown', TooltipManager
.onScrollRemoveTooltip
, true);
32 TooltipManager
.element
.removeEventListener('scroll', TooltipManager
.onScrollRemoveTooltip
, true);
36 static onScrollRemoveTooltip() {
37 TooltipManager
.hideTooltip();
40 static showTooltip(dom
, timeout
= 2500) {
41 TooltipManager
.hideTooltip();
42 const data
= d3
.select(dom
).attr('data-tip');
43 const tip
= d3
.select(TooltipManager
.element
).selectAll('.tooltip-indicator').data([data
]);
44 const rect
= dom
.getBoundingClientRect();
45 // position is handled fairly well by CSS for the bottom (default) position
46 // new code will be needed to support other positions, e.g. top, left, etc.
50 'pointer-events': 'none',
51 top
: rect
.bottom
+ 'px' ,
52 left
: (rect
.left
+ (rect
.width
/ 2)) + 'px'
54 const enter
= tip
.enter('div').append('div').classed('tooltip-indicator', true);
55 enter
.append('i').classed('tooltip-indicator-arrow arrow-up', true);
56 enter
.append('span').classed('tooltip-indicator-content', true);
57 tip
.style(position
).transition().style('opacity', 1);
58 tip
.select('span').html(d
=> d
);
60 TooltipManager
.timeoutId
= setTimeout(() => tip
.transition().style('opacity', 0), timeout
);
65 static hideTooltip() {
66 clearTimeout(TooltipManager
.timeoutId
);
67 d3
.selectAll('.tooltip-indicator').remove();
72 TooltipManager
.addEventListeners();
74 export default TooltipManager
;