From 7215b3077bb829eb76b8f713fd587d4c69852745 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Wed, 10 Jan 2024 13:05:08 +0100
Subject: [PATCH] feat: tooltips with tippy.js

---
 assets/controllers/tooltip_controller.js | 36 ++++++++++++++++++++++++
 assets/styles/_components.css            |  3 +-
 assets/styles/components/tooltip.css     | 18 ++++++++++++
 3 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 assets/controllers/tooltip_controller.js
 create mode 100644 assets/styles/components/tooltip.css

diff --git a/assets/controllers/tooltip_controller.js b/assets/controllers/tooltip_controller.js
new file mode 100644
index 0000000..a95ecd7
--- /dev/null
+++ b/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)
+    }
+}
diff --git a/assets/styles/_components.css b/assets/styles/_components.css
index 10fbbe1..d5bed8c 100644
--- a/assets/styles/_components.css
+++ b/assets/styles/_components.css
@@ -3,4 +3,5 @@
 @import "components/button.css";
 @import "components/datatable.css";
 @import "components/datepicker.css";
-@import "components/toast.css";
\ No newline at end of file
+@import "components/toast.css";
+@import "components/tooltip.css";
\ No newline at end of file
diff --git a/assets/styles/components/tooltip.css b/assets/styles/components/tooltip.css
new file mode 100644
index 0000000..4cd1f4c
--- /dev/null
+++ b/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');
+}