Added component for tooltips and categories

Frontend/src/components/xml/tooltips/TooltipCategoryComponent.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+const isCategoryHidden = ref(true)
+
+const props = defineProps({
+    name: {type: String, required: true}
+})
+
+function toggleTooltips() {
+    isCategoryHidden.value = !isCategoryHidden.value;
+}
+
+</script>
+
+<template>
+    <div class="flex p-2 flex-col rounded-xl bg-gradient-to-r from-blue-400 to-blue-300 dark:from-sky-700 dark:to-sky-900">
+        <button :class="{ 'mb-2' : !isCategoryHidden }" class="text-white" @click="toggleTooltips()">{{ props.name }}</button>
+        <div id="content" :class="{'hidden' : isCategoryHidden}" class="w-full p-2 rounded-xl dark:text-white bg-indigo-50 dark:bg-slate-800" >
+            Ultrices purus convallis pretium. Velit adipiscing curabitur facilisis proin, dis elit fames conubia lacinia adipiscing massa montes. Nec gravida volutpat viverra viverra et eu ac morbi id proin donec. Dis sollicitudin egestas sociis metus cras inceptos vehicula auctor felis vestibulum? Non potenti platea elit morbi suscipit eleifend, condimentum phasellus aliquet condimentum eros sodales. Mus pretium adipiscing, tempor gravida. Sapien.
+        </div>
+    </div>
+</template>