OpenProject Lookbook

Previews

No matching results.

x
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
<div class="op-lookbook--tooltip-demo">
  <div>
    Right
    <span class="tooltip--right" data-tooltip="The content of the tooltip">
      <i class="icon icon-help2"></i>
    </span>
  </div>
  <div>
    Bottom
    <span class="tooltip--bottom" data-tooltip="The content of the tooltip">
      <i class="icon icon-help2"></i>
    </span>
  </div>
  <div>
    Left
    <span class="tooltip--left" data-tooltip="The content of the tooltip">
      <i class="icon icon-help2"></i>
    </span>
  </div>
  <div>
    Top
    <span class="tooltip--top" data-tooltip="The content of the tooltip">
      <i class="icon icon-help2"></i>
    </span>
  </div>
</div>
<style>
  .op-lookbook--tooltip-demo {
    width: 50vw;
    margin: 0 auto;
  }
  .op-lookbook--tooltip-demo div {
    margin: 1rem;
    padding: 1rem;
    border: 1px solid #eee;
  }
</style>

These can contain simple texts.

Attention:

  • They are not suitable for HTML within the Tooltip.
  • Also, if the are already :before or :after CSS rules for the decorated element, things will break as these rules will get overwritten.
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
<div class="op-lookbook--tooltip-demo">
  <div>
    Right
    <span class="tooltip--right" data-tooltip="The content of the tooltip">
  <i class="icon icon-help2"></i>
</span>
  </div>
  <div>
    Bottom
    <span class="tooltip--bottom" data-tooltip="The content of the tooltip">
  <i class="icon icon-help2"></i>
</span>
  </div>
  <div>
    Left
    <span class="tooltip--left" data-tooltip="The content of the tooltip">
  <i class="icon icon-help2"></i>
</span>
  </div>
  <div>
    Top
    <span class="tooltip--top" data-tooltip="The content of the tooltip">
  <i class="icon icon-help2"></i>
</span>
  </div>
</div>
<style>
  .op-lookbook--tooltip-demo {
    width: 50vw;
    margin: 0 auto;
  }
  .op-lookbook--tooltip-demo div {
    margin: 1rem;
    padding: 1rem;
    border: 1px solid #eee;
  }
</style>

No params configured.