floating-ui/packages/dom/example/index.html at main · RustForWeb/floating-ui · GitHub

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
<html>
    <head>
        <title>Floating UI DOM Example</title>

        <style>
            body {
                font-family: system-ui;
            }

            #button {
                background-color: #dce2ec;
                color: #1f2028;
                border: 0px;
                padding: 0px 8px;
                border-radius: 4px;
                font-size: 1.125rem;
                line-height: 1.778;
            }

            #tooltip {
                display: none;
                width: max-content;
                position: absolute;
                top: 0;
                left: 0;
                background: #1f2028;
                color: #ffffff;
                font-weight: bold;
                padding: 4px;
                border-radius: 4px;
                font-size: 0.875rem;
                line-height: 1.25rem;
                pointer-events: none;
            }

            #arrow {
                position: absolute;
                background: #1f2028;
                width: 8px;
                height: 8px;
                transform: rotate(45deg);
            }
        </style>
    </head>
    <body>
        <button id="button" aria-describedby="tooltip">My button</button>
        <div id="tooltip" role="tooltip">
            My tooltip with more content
            <div id="arrow"></div>
        </div>
    </body>
</html>