feat: tooltips with tippy.js

assets/controllers/tooltip_controller.js

@@ -0,0 +1,36 @@
+import { Controller } from '@hotwired/stimulus'
+import tippy from 'tippy.js'
+
+export default class extends Controller {
+    static targets = ['trigger', 'template']
+    static values = { content: String, placement: String }
+
+    connect() {
+        let options, element
+        let placement = this.placementValue ? this.placementValue : 'top'
+        if (this.hasTemplateTarget) {
+            options = {
+                content: this.templateTarget.innerHTML,
+                placement,
+                touch: true,
+                trigger: 'click',
+                allowHTML: true,
+                interactive: true,
+            }
+        } else {
+            options = {
+                content: this.contentValue,
+                placement,
+                touch: false,
+                allowHTML: true,
+                interactive: true,
+            }
+        }
+        if (this.hasTriggerTarget) {
+            element = this.triggerTarget
+        } else {
+            element = this.element
+        }
+        tippy(element, options)
+    }
+}

assets/styles/_components.css

@@ -3,4 +3,5 @@
 @import "components/button.css";
 @import "components/datatable.css";
 @import "components/datepicker.css";
-@import "components/toast.css";
+@import "components/toast.css";
+@import "components/tooltip.css";

assets/styles/components/tooltip.css

@@ -0,0 +1,18 @@
+@import "tippy.js/dist/tippy.css";
+
+.tippy-box {
+  background-color: theme('colors.primary');
+}
+
+.tippy-box[data-placement^='top'] > .tippy-arrow::before {
+  border-top-color: theme('colors.primary');
+}
+.tippy-box[data-placement^='bottom'] > .tippy-arrow::before {
+  border-bottom-color: theme('colors.primary');
+}
+.tippy-box[data-placement^='left'] > .tippy-arrow::before {
+  border-left-color: theme('colors.primary');
+}
+.tippy-box[data-placement^='right'] > .tippy-arrow::before {
+  border-right-color: theme('colors.primary');
+}