Css Zero Showcase
x
1
2
3
4
5
<!-- Native -->
<button name="button" type="submit" class="btn" title="Add to library">Hover</button>
<!-- Custom -->
<button name="button" type="submit" class="btn" data-controller="tooltip" data-tooltip-content-value="Add to library">Hover</button>
1
2
3
4
5
<%# Native %>
<%= button_tag "Hover", class: "btn", title: "Add to library" %>
<%# Custom %>
<%= button_tag "Hover", class: "btn", data: { controller: "tooltip", tooltip_content_value: "Add to library" } %>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.tippy-box {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--rounded-md);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  transition-property: transform, visibility, opacity;
  &[data-state=hidden] {
    opacity: 0;
  }
  &[data-state=visible] {
    transition-timing-function: var(--ease-in);
  }
  .tippy-content {
    padding: var(--size-1_5) var(--size-3);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { Controller } from "@hotwired/stimulus"
import tippy from "https://cdn.skypack.dev/tippy.js@6.3.7?min"
export default class extends Controller {
  static values = { content: String }
  connect() {
    this.tooltip = tippy(this.element, { content: this.contentValue, arrow: false, interactive: true, delay: [700, 0], offset: [0, 3] })
  }
  disconnect() {
    this.tooltip.destroy()
  }
}

Dependencies