1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
open! Core
open! Import
module Direction = struct
type t =
| Top
| Right
| Bottom
| Left
end
module Style =
[%css
stylesheet
{|
.tooltip_container {
--dist: 0.3em;
position: relative;
display: inline-flex;
justify-content: center;
text-decoration: underline;
text-decoration-style: dotted;
text-underline-offset: 0.15em;
}
.tooltip {
/* one day "top-layer" will save us https://fullscreen.spec.whatwg.org/#top-layer */
z-index: 9001
}
.tooltip_container>.tooltip {
display:none;
}
.tooltip_container:hover>.tooltip {
display:block;
position: absolute;
padding: 0.1em 0.3em;
max-width: max(300px, 100%);
width: max-content;
border: 1px solid var(--border);
border-radius: 2px;
background: var(--bg);
color: var(--fg);
}
.tooltip_container.top,
.tooltip_container.bottom {
flex-direction: row;
}
.tooltip_container.left,
.tooltip_container.right {
flex-direction: column;
}
.tooltip_container.top>.tooltip {
transform: translateY(-100%);
}
.tooltip_container.bottom>.tooltip {
top: 100%;
}
.tooltip_container.left {
padding-left: var(--dist);
/* You can't just negate a var, so subtract it from 0 */
margin-left: calc(0 - var(--dist));
}
.tooltip_container.right {
padding-right: var(--dist);
margin-right: calc(0 - var(--dist));
}
.tooltip_container.left>.tooltip {
transform: translateX(calc(-100% - var(--dist)));
}
.tooltip_container.right>.tooltip {
left: 100%;
}
|}]
let make
(constants : Constants.t)
~container_attr
~tooltip_attr
~direction
~tipped
~tooltip
=
let dir_class =
match (direction : Direction.t) with
| Top -> Style.top
| Bottom -> Style.bottom
| Left -> Style.left
| Right -> Style.right
in
let tooltip =
let vars =
Style.Variables.set
~bg:(Color.to_string_css constants.extreme.background)
~fg:(Color.to_string_css constants.extreme.foreground)
~border:(Color.to_string_css constants.extreme_primary_border)
()
in
Vdom.Node.div ~attrs:[ Style.tooltip; tooltip_attr; vars ] [ tooltip ]
in
Vdom.Node.span
~attrs:[ container_attr; Style.tooltip_container; dir_class ]
[ tipped; tooltip ]
;;