Merge pull request #54 from bootwindt/create-tooltip-helper

Create tooltip helper
bootwindui · Sep 30, 2023 · 69bc965 · 69bc965
2 parents 7e0b152 + ef8c70e
commit 69bc965
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 21 deletions.
diff --git a/packages/@bootwind-helpers/src/App.vue b/packages/@bootwind-helpers/src/App.vue
@@ -1,20 +1,34 @@
 <template>
-    <div>
-        <button ref="btn">Button</button>
-        <div style="max-width: 200px;" ref="element" :style="`background: black;color: white; ${content.position}`">
-            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur, explicabo velit suscipit, veritatis fugit veniam excepturi quasi soluta nam dignissimos facere cum labore ab tempora modi, asperiores commodi temporibus? Voluptates.
+    <div style="min-height: 200vh;">
+        <button role="label" @mouseenter="toggleContent(1)" ref="btn">Button</button>
+        <div role="listbox"  tabindex="0" @mouseleave="toggleContent(1)" v-if="content.active" style="position:fixed;max-width: 200px;" ref="element" :style="`background: black;color: white; ${content.position}`">
+            <div role="option" id="listbox1-1" class="selected" aria-selected="true">
+                Green
+            </div>
+            <div role="option" id="listbox1-2">Orange</div>
+            <div role="option" id="listbox1-3">Red</div>
+            <div role="option" id="listbox1-4">Blue</div>
+            <div role="option" id="listbox1-5">Violet</div>
+            <div role="option" id="listbox1-6">Periwinkle</div>
+            <button>Button 1</button>
+            <button>Button 2</button>
+            <button>Button 3</button>
         </div>
     </div>
     <br>
-    <div style="text-align: right;">
-        <button ref="tooltip_btn">Button</button>
-        <div style="max-width: 200px;" ref="tooltip_content" :style="`background: black;color: white; ${content.position_2}`">
+    <div style="text-align: right;margin-top: 500px;">
+        <button @mouseenter="toggleContent(2)" ref="tooltip_btn">Button</button>
+        <div @mouseleave="toggleContent(2)" v-if="content.active_2" style="position:fixed;max-width: 200px;" ref="tooltip_content" :style="`background: black;color: white; ${content.position_2}`">
+
+            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur, explicabo velit suscipit, veritatis fugit veniam excepturi quasi soluta nam dignissimos facere cum labore ab tempora modi, asperiores commodi temporibus? Voluptates.
+            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur, explicabo velit suscipit, veritatis fugit veniam excepturi quasi soluta nam dignissimos facere cum labore ab tempora modi, asperiores commodi temporibus? Voluptates.
+            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur, explicabo velit suscipit, veritatis fugit veniam excepturi quasi soluta nam dignissimos facere cum labore ab tempora modi, asperiores commodi temporibus? Voluptates.
             Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur, explicabo velit suscipit, veritatis fugit veniam excepturi quasi soluta nam dignissimos facere cum labore ab tempora modi, asperiores commodi temporibus? Voluptates.
         </div>
     </div>
 </template>
 <script setup>
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive } from 'vue'
 import { getFloating } from './index.js'
 
 const btn = ref(null);
@@ -26,13 +40,22 @@ const tooltip_content = ref(null);
 const content = reactive({
   position: '',
   position_2: '',
+  active: false,
+  active_2: false
 })
 
-onMounted(() => {
-    content.position = getFloating(btn.value,element.value, 'right', 10)
-    setTimeout(() => {
-        // mutiple ref issues
-        content.position_2 = getFloating(tooltip_btn.value,tooltip_content.value, 'left', 3)
-    })
-})
+const toggleContent = (n) => {
+    if(n === 1){
+        content.active = !content.active 
+        setTimeout(() => {
+            content.position = getFloating(btn.value,element.value, 'right', 10, 10)
+        })
+    }else{
+        content.active_2 = !content.active_2
+        setTimeout(() => {
+            content.position_2 = getFloating(tooltip_btn.value,tooltip_content.value, 'left', 10, 10)
+        })
+    }
+}
+
 </script>
diff --git a/packages/@bootwind-helpers/src/index.js b/packages/@bootwind-helpers/src/index.js
@@ -1,20 +1,27 @@
 
-const getFloating = (btn, element, position, x = 0, y = 0) => {
-    if(btn && element && position){
+const getFloating = (btn, el, position, x = 0, y = 0) => {
+    if(btn && el && position){
 
         const btnWidth = btn.offsetWidth
         const btnTop = btn.offsetTop
         const btnLeft = btn.offsetLeft
 
-
+        let top = btnTop + y
+
+        const elTop = el.offsetTop
+        const elHeight = el.offsetHeight
+        if(elTop + elHeight > window.innerHeight){
+            top = window.innerHeight - elHeight - y
+        }
+
         if(position === 'right') {
             const left = btnWidth + btnLeft + x
-            return `position:fixed;left:${left}px;top:${btnTop + y}px`
+            return `left:${left}px;top:${top}px`
         }
-
+        
         if(position === 'left') {
             const right = window.innerWidth - btnLeft + x
-            return `position:fixed;right:${right}px;top:${btnTop + y}px;`
+            return `right:${right}px;top:${top}px`
         }
 
     }