From 4dabb65b5d1219996cbc3e5ffa2bb2655ef865b5 Mon Sep 17 00:00:00 2001
From: Pedro Amorim <pedro.amorim@ptfs-europe.com>
Date: Mon, 3 Feb 2025 11:00:16 +0000
Subject: [PATCH] Bug 38201: Add a ToolTip component

Signed-off-by: Michaela Sieber <michaela.sieber@kit.edu>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
---
 .../prog/js/vue/components/FormElement.vue    |  4 ++-
 .../prog/js/vue/components/ToolTip.vue        | 34 +++++++++++++++++++
 2 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/ToolTip.vue

diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/FormElement.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/FormElement.vue
index 28af7cbfb9..a9aa426ef1 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/FormElement.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/FormElement.vue
@@ -138,12 +138,14 @@
             :resource="resource"
         ></FormRelationshipSelect>
     </template>
+    <ToolTip v-if="attr.toolTip" :toolTip="attr.toolTip"></ToolTip>
     <span v-if="attr.required" class="required">{{ $__("Required") }}</span>
 </template>
 
 <script>
 import BaseElement from "./BaseElement.vue";
 import FormRelationshipSelect from "./FormRelationshipSelect.vue";
+import ToolTip from "./ToolTip.vue";
 
 export default {
     props: {
@@ -212,6 +214,6 @@ export default {
         },
     },
     name: "FormElement",
-    components: { FormRelationshipSelect },
+    components: { FormRelationshipSelect, ToolTip },
 };
 </script>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ToolTip.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ToolTip.vue
new file mode 100644
index 0000000000..0288bb6d3f
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ToolTip.vue
@@ -0,0 +1,34 @@
+<template>
+    <a
+        v-if="toolTip"
+        class="tooltip_helper"
+        data-bs-toggle="tooltip"
+        :title="toolTip"
+        ><i class="fa-solid fa-circle-question"></i
+    ></a>
+</template>
+
+<script>
+import Tooltip from "bootstrap/js/dist/tooltip";
+
+export default {
+    props: {
+        toolTip: String | null,
+    },
+    mounted() {
+        new Tooltip(document.body, {
+            selector: "[data-bs-toggle='tooltip']",
+        });
+    },
+    name: "ToolTip",
+};
+</script>
+
+<style>
+.tooltip_helper {
+    margin-left: 0.5em;
+}
+.tooltip_helper:hover {
+    cursor: pointer;
+}
+</style>