package bonsai

You can search for identifiers within the package.

in-package search v0.2.0

A library for building dynamic webapps, using Js_of_ocaml

Install

Dune Dependency

github.com Readme Changelog MIT License Edit opam file Versions (6)

Authors

J

Jane Street Group, LLC

Maintainers

J

Jane Street developers

Sources

bonsai-v0.16.0.tar.gz

sha256=1d68aab713659951eba5b85f21d6f9382e0efa8579a02c3be65d9071c6e86303

doc/src/bonsai.web_ui_view/tooltip.ml.html

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