@redseed/redseed-ui-vue3 8.14.0 → 8.14.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-vue3",
-    "version": "8.14.0",
+    "version": "8.14.1",
     "description": "RedSeed UI Vue 3 components",
     "main": "index.js",
     "repository": "https://github.com/redseedtraining/redseed-ui",

package/src/components/Tooltip/Tooltip.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue'
 import { InformationCircleIcon } from '@heroicons/vue/24/outline'
 
 const props = defineProps({
@@ -52,6 +52,8 @@ const props = defineProps({
 
 const isOpen = ref(false)
 const tooltipRef = ref(null)
+const contentRef = ref(null)
+const contentStyle = ref({})
 let hoverTimeout = null
 
 const defaultSize = computed(() => !props.xs && !props.sm && !props.md)
@@ -83,11 +85,6 @@ const triggerClass = computed(() => [
     },
 ])
 
-const contentClass = computed(() => [
-    'rsui-tooltip__content',
-    `rsui-tooltip__content--${props.position}`,
-])
-
 function open() {
     clearTimeout(hoverTimeout)
     isOpen.value = true
@@ -116,6 +113,42 @@ function toggle() {
     isOpen.value = !isOpen.value
 }
 
+function updatePosition() {
+    if (!tooltipRef.value) return
+    const rect = tooltipRef.value.getBoundingClientRect()
+    const style = { position: 'fixed', zIndex: 50 }
+
+    if (props.position === 'top') {
+        style.left = `${rect.left + rect.width / 2}px`
+        style.top = `${rect.top}px`
+        style.transform = 'translate(-50%, -100%)'
+        style.marginTop = '-8px'
+    } else if (props.position === 'bottom') {
+        style.left = `${rect.left + rect.width / 2}px`
+        style.top = `${rect.bottom}px`
+        style.transform = 'translate(-50%, 0)'
+        style.marginTop = '8px'
+    } else if (props.position === 'left') {
+        style.left = `${rect.left}px`
+        style.top = `${rect.top + rect.height / 2}px`
+        style.transform = 'translate(-100%, -50%)'
+        style.marginLeft = '-8px'
+    } else if (props.position === 'right') {
+        style.left = `${rect.right}px`
+        style.top = `${rect.top + rect.height / 2}px`
+        style.transform = 'translate(0, -50%)'
+        style.marginLeft = '8px'
+    }
+
+    contentStyle.value = style
+}
+
+watch(isOpen, (val) => {
+    if (val) {
+        nextTick(() => updatePosition())
+    }
+})
+
 function closeOnEscape(e) {
     if (isOpen.value && e.key === 'Escape') {
         isOpen.value = false
@@ -156,21 +189,25 @@ onUnmounted(() => {
         ></div>
     </Teleport>
 
-    <transition
-        enter-active-class="rsui-tooltip__transition--enter-active"
-        enter-from-class="rsui-tooltip__transition--enter-from"
-        enter-to-class="rsui-tooltip__transition--enter-to"
-        leave-active-class="rsui-tooltip__transition--leave-active"
-        leave-from-class="rsui-tooltip__transition--leave-from"
-        leave-to-class="rsui-tooltip__transition--leave-to"
-    >
-        <div
-            v-show="isOpen"
-            :class="contentClass"
-            role="tooltip"
+    <Teleport to="body">
+        <transition
+            enter-active-class="rsui-tooltip__transition--enter-active"
+            enter-from-class="rsui-tooltip__transition--enter-from"
+            enter-to-class="rsui-tooltip__transition--enter-to"
+            leave-active-class="rsui-tooltip__transition--leave-active"
+            leave-from-class="rsui-tooltip__transition--leave-from"
+            leave-to-class="rsui-tooltip__transition--leave-to"
         >
-            <slot></slot>
-        </div>
-    </transition>
+            <div
+                v-show="isOpen"
+                ref="contentRef"
+                class="rsui-tooltip__content"
+                :style="contentStyle"
+                role="tooltip"
+            >
+                <slot></slot>
+            </div>
+        </transition>
+    </Teleport>
 </div>
 </template>