package bonsai

  1. Overview
  2. Docs
package bonsai
Legend:
Page
Library
Module
Module type
Parameter
Class
Class type
Source

Source file tooltip.ml

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 ]
;;
OCaml

Innovation. Community. Security.

GitHub Discord Twitter Peertube RSS
About
Changelog Releases Industrial Users Academic Users Why OCaml
Ecosystem
Packages Community Events OCaml Planet Jobs
Resources
Install OCaml Get Started Platform Tools Language Manual Standard Library API Books Exercises Papers OCaml Playground Logo
Policies
Carbon Footprint Governance Privacy Code of Conduct