Renuo_Full_Lockup Rails Bootstrap Ui
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
<h3 class="my-3">Directions</h3>
<button type="button"
        class="btn btn-secondary"
        data-controller="tooltip"
        data-bs-placement="top"
        data-bs-title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-controller="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-controller="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-controller="tooltip" data-bs-placement="left" data-bs-title="Tooltip on left">
  Tooltip on left
</button>
<hr>
<h3 class="my-3">Custom</h3>
<button type="button" class="btn btn-secondary"
        data-controller="tooltip"
        data-bs-placement="top"
        data-bs-custom-class="custom-tooltip"
        data-bs-title="This top tooltip is themed via CSS variables.">
  Custom tooltip
</button>
<hr>
<h3 class="my-3">Disabled elements</h3>
<span class="d-inline-block" tabindex="0" data-controller="tooltip" data-bs-title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>
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
<h3 class="my-3">Directions</h3>
<button type="button"
        class="btn btn-secondary"
        data-controller="tooltip"
        data-bs-placement="top"
        data-bs-title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-controller="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-controller="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-controller="tooltip" data-bs-placement="left" data-bs-title="Tooltip on left">
  Tooltip on left
</button>
<hr>
<h3 class="my-3">Custom</h3>
<button type="button" class="btn btn-secondary"
        data-controller="tooltip"
        data-bs-placement="top"
        data-bs-custom-class="custom-tooltip"
        data-bs-title="This top tooltip is themed via CSS variables.">
  Custom tooltip
</button>
<hr>
<h3 class="my-3">Disabled elements</h3>
<span class="d-inline-block" tabindex="0" data-controller="tooltip" data-bs-title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Bootstrap tooltips must be initialized manually.
In Rails, the best way to do that and be Turbo-compatible, is to attach a stimulus controller to each tooltip. In this example we attach the tooltip controller to all elements with the data-controller="tooltip" attribute. This makes also the attribute data-bs-toggle="tooltip" unnecessary.

No params configured.

_tooltip.scss

1
2
3
4
.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
  --bs-tooltip-color: var(--bs-white);
}

tooltip_controller.js

1
2
3
4
5
6
7
import { Controller } from '@hotwired/stimulus';
export default class TooltipController extends Controller {
  connect() {
    new bootstrap.Tooltip(this.element);
  }
}