try fix tooltip

45Drives · Jun 10, 2024 · 2f48c66 · 2f48c66
1 parent 3c4efba
commit 2f48c66
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 31 deletions.
diff --git a/houston-common-ui/lib/components/InputLabelWrapper.vue b/houston-common-ui/lib/components/InputLabelWrapper.vue
@@ -1,37 +1,38 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import ToolTip from '@/components/ToolTip.vue';
+import { ref, defineProps } from "vue";
+import ToolTip from "@/components/ToolTip.vue";
 
 const showToolTip = ref(false);
 
+defineProps<{
+  tooltipAbove?: boolean;
+}>();
 </script>
 
 <template>
-    <div>
-        <div
-            v-if="$slots.label || $slots.tooltip"
-            class="flex items-start"
-        >
-            <label
-                v-if="$slots.label"
-                class="text-label"
-                :class="{ 'underline decoration-dotted': $slots.tooltip }"
-                @mouseenter="showToolTip = true"
-                @mouseleave="showToolTip = false"
-                @click="showToolTip = !showToolTip"
-            >
-                <slot name="label" />
-            </label>
-            <ToolTip
-                v-if="$slots.tooltip"
-                v-model="showToolTip"
-                :class="{ 'pl-1': $slots.label }"
-            >
-                <slot name="tooltip" />
-            </ToolTip>
-        </div>
-        <slot />
+  <div>
+    <div v-if="$slots.label || $slots.tooltip" class="flex items-start">
+      <label
+        v-if="$slots.label"
+        class="text-label"
+        :class="{ 'underline decoration-dotted': $slots.tooltip }"
+        @mouseenter="showToolTip = true"
+        @mouseleave="showToolTip = false"
+        @click="showToolTip = !showToolTip"
+      >
+        <slot name="label" />
+      </label>
+      <ToolTip
+        :above="tooltipAbove"
+        v-if="$slots.tooltip"
+        v-model="showToolTip"
+        :class="{ 'pl-1': $slots.label }"
+      >
+        <slot name="tooltip" />
+      </ToolTip>
     </div>
+    <slot />
+  </div>
 </template>
 
 <style scoped>

diff --git a/houston-common-ui/lib/components/ToolTip.vue b/houston-common-ui/lib/components/ToolTip.vue
@@ -1,25 +1,23 @@
 <script setup lang="ts">
-
 import { defineModel, defineProps } from "vue";
 import { QuestionMarkCircleIcon } from "@heroicons/vue/20/solid";
 
 const show = defineModel<boolean>({ default: false });
 defineProps<{
   above?: boolean;
 }>();
-
 </script>
 
 <template>
   <span
-    class="relative overflow-visible inline-block"
-    @click="show = !show"
+    class="relative overflow-visible inline-block z-50"
+    @click.stop="show = !show"
     @mouseenter="show = true"
     @mouseleave="show = false"
   >
     <QuestionMarkCircleIcon class="size-icon icon-default" />
     <div
-      class="text-left absolute bg-default shadow-sm border border-default text-muted font-normal whitespace-pre-wrap text-sm rounded-md p-2 z-50 min-w-40 max-w-full"
+      class="text-left absolute bg-default shadow-sm border border-default text-muted font-normal whitespace-pre-wrap text-sm rounded-md p-2 z-50 overflow-y-auto max-h-52"
       :class="{ 'bottom-5': above }"
       v-if="show"
     >