-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
49 lines (43 loc) · 938 Bytes
/
index.html
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
<!doctype html>
<head><title>Houdini examples</title></head>
<body>
<span class="tooltip-1">I'm a default tooltip!</span>
<span class="tooltip-2">I'm a customized tooltip!</span>
<p>You can directly edit the following CSS!</p>
</body>
<style contenteditable>
.tooltip-1 {
background-image: paint(tooltip);
padding: .5em .5em .5em 1em;
}
.tooltip-2 {
background-image: paint(tooltip);
padding: calc(var(--triangle-size) * 1px + .5em) 1em 1em;
--round-radius: 0;
--background-color: #4d7990;
--triangle-size: 20;
--position: 20;
--direction: top;
--border-color: #333;
--border-width: 2;
color: #fff;
}
</style>
<style>
body {
padding: 5em;
background: #ddd;
font-family: Helvetica, Arial, sans-serif;
}
p {
margin: 2em 0;
}
style[contenteditable] {
display: block;
white-space: pre;
background: #fff;
}
</style>
<script>
CSS.paintWorklet.addModule('paintworklet.js?no-cache=1');
</script>