Skip to content

Commit e0e3a60

Browse files
KoolADE85KoolADE85
committed
refactor tooltip
1 parent 24d08bb commit e0e3a60

File tree

6 files changed

+203
-227
lines changed

6 files changed

+203
-227
lines changed

‎components/dash-core-components/src/components/Tooltip.tsx‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import React from 'react';
2+
import {TooltipProps} from '../types';
3+
import './css/tooltip.css';
4+
5+
/**
6+
* A tooltip with an absolute position.
7+
*/
8+
const Tooltip = ({
9+
show = true,
10+
targetable = false,
11+
direction = 'right',
12+
border_color = 'var(--Dash-Stroke-Weak)',
13+
background_color = 'var(--Dash-Fill-Inverse-Strong)',
14+
className = '',
15+
zindex = 1,
16+
loading_text = 'Loading...',
17+
...props
18+
}: TooltipProps) => {
19+
const {bbox, id} = props;
20+
const show_tooltip = show && bbox;
21+
22+
const ctx = window.dash_component_api.useDashContext();
23+
const is_loading = ctx.useLoading();
24+
25+
const position = bbox ?? {x0: 0, x1: 0, y0: 0, y1: 0};
26+
27+
const styles = {
28+
top: `${position?.y0}px`,
29+
left: `${position?.x0}px`,
30+
width: `${position?.x1 - position?.x0}px`,
31+
height: `${position?.y1 - position?.y0}px`,
32+
display: `${show_tooltip ? 'inline-block' : 'none'}`,
33+
pointerEvents: `${targetable ? 'auto' : 'none'}`,
34+
'--Dash-Tooltip-Border-Color': border_color,
35+
'--Dash-Tooltip-Background-Color': background_color,
36+
'--Dash-Tooltip-ZIndex': zindex,
37+
} as const;
38+
39+
return (
40+
<>
41+
<div
42+
className="dcc-tooltip-bounding-box dash-tooltip"
43+
style={styles}
44+
>
45+
<div
46+
className={`hover hover-${direction}`}
47+
data-dash-is-loading={is_loading}
48+
>
49+
<span
50+
id={id}
51+
className={`hover-content ${className}`}
52+
style={props.style}
53+
>
54+
{is_loading ? (
55+
<span>{loading_text}</span>
56+
) : (
57+
props.children
58+
)}
59+
</span>
60+
</div>
61+
</div>
62+
</>
63+
);
64+
};
65+
66+
export default Tooltip;

‎components/dash-core-components/src/components/css/Tooltip.tsx‎

Lines changed: 0 additions & 182 deletions
This file was deleted.

‎components/dash-core-components/src/components/css/textarea.css‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,16 @@
44
border-radius: var(--Dash-Spacing);
55
border: 1px solid var(--Dash-Stroke-Strong);
66
box-sizing: border-box;
7-
color: var(--Dash-Text-Primary);
7+
color: inherit;
88
padding: var(--Dash-Spacing) calc(2 * var(--Dash-Spacing));
99
width: 100%;
10+
accent-color: var(--Dash-Fill-Interactive-Strong);
11+
outline-color: var(--Dash-Fill-Interactive-Strong);
12+
}
13+
14+
.dash-textarea:disabled {
15+
opacity: 0.6;
16+
cursor: not-allowed;
1017
}
1118

1219
.dash-textarea:invalid {

‎components/dash-core-components/src/components/css/tooltip.css‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
.dash-tooltip {
2+
position: absolute;
3+
}
4+
5+
.hover {
6+
position: absolute;
7+
}
8+
.hover-right {
9+
/* Offset so that the triangle caret lands directly on what's hovered */
10+
transform: translate(5px, 0);
11+
top: 50%;
12+
left: 100%;
13+
}
14+
.hover-left {
15+
transform: translate(-5px, 0);
16+
top: 50%;
17+
}
18+
.hover-bottom {
19+
transform: translate(0, 6px);
20+
top: 100%;
21+
left: 50%;
22+
}
23+
.hover-top {
24+
transform: translate(0, -5px);
25+
left: 50%;
26+
}
27+
.hover-content {
28+
position: absolute;
29+
border: 1px solid var(--Dash-Tooltip-Border-Color);
30+
border-radius: 2px;
31+
padding: 5px 10px;
32+
background: var(--Dash-Tooltip-Background-Color);
33+
white-space: nowrap;
34+
z-index: var(--Dash-Tooltip-ZIndex);
35+
pointer-events: none;
36+
box-shadow: 0px 10px 38px -10px var(--Dash-Shading-Strong),
37+
0px 10px 20px -15px var(--Dash-Shading-Weak);
38+
}
39+
.hover .hover-content,
40+
.hover-right .hover-content {
41+
transform: translate(0, -50%);
42+
}
43+
.hover-left .hover-content {
44+
transform: translate(-100%, -50%);
45+
}
46+
.hover-top .hover-content {
47+
transform: translate(-50%, -100%);
48+
}
49+
.hover-bottom .hover-content {
50+
transform: translate(-50%, 0);
51+
}
52+
/* Add a small triangle on the left side of the box */
53+
.hover:before,
54+
.hover:after {
55+
content: '';
56+
width: 0;
57+
height: 0;
58+
position: absolute;
59+
border-style: solid;
60+
top: -6px;
61+
z-index: var(--Dash-Tooltip-ZIndex);
62+
}
63+
.hover:before,
64+
.hover:after,
65+
.hover-right:before,
66+
.hover-right:after {
67+
border-width: 6px 6px 6px 0;
68+
}
69+
.hover-top:before,
70+
.hover-top:after {
71+
border-width: 6px 6px 0 6px;
72+
}
73+
.hover-bottom:before,
74+
.hover-bottom:after {
75+
border-width: 0 6px 6px 6px;
76+
}
77+
.hover-left:before,
78+
.hover-left:after {
79+
border-width: 6px 0 6px 6px;
80+
}
81+
.hover:before,
82+
.hover-right:before {
83+
border-color: transparent var(--Dash-Tooltip-Border-Color) transparent
84+
transparent;
85+
left: -5px;
86+
}
87+
.hover:after,
88+
.hover-right:after {
89+
border-color: transparent var(--Dash-Tooltip-Background-Color) transparent
90+
transparent;
91+
left: -4px;
92+
}
93+
.hover-left:before {
94+
border-color: transparent transparent transparent
95+
var(--Dash-Tooltip-Border-Color);
96+
left: -1px;
97+
}
98+
.hover-left:after {
99+
border-color: transparent transparent transparent
100+
var(--Dash-Tooltip-Background-Color);
101+
left: -2px;
102+
}
103+
.hover-top:before,
104+
.hover-top:after,
105+
.hover-bottom:before,
106+
.hover-bottom:after {
107+
left: -6px;
108+
}
109+
.hover-bottom:before {
110+
border-color: transparent transparent var(--Dash-Tooltip-Border-Color)
111+
transparent;
112+
}
113+
.hover-bottom:after {
114+
border-color: transparent transparent var(--Dash-Tooltip-Background-Color)
115+
transparent;
116+
top: -5px;
117+
}
118+
.hover-top:before {
119+
border-color: var(--Dash-Tooltip-Border-Color) transparent transparent
120+
transparent;
121+
top: -1px;
122+
}
123+
.hover-top:after {
124+
border-color: var(--Dash-Tooltip-Border-Color) transparent transparent
125+
transparent;
126+
top: -2px;
127+
}

0 commit comments

Comments
 (0)