feat: tooltips with tippy.js

2024-01-10 13:05:08 +01:00
parent 25c44d3292
commit 7215b3077b
3 changed files with 56 additions and 1 deletions
@@ -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)
+    }
+}