add more sample

packages/@bootwind-helpers/src/App.vue

@@ -16,8 +16,29 @@
         </div>
     </div>
     <br>
+    <div >
+        <button ref="dropdown_btn_left" @click="toggleContent(3)">
+            Dropdown button
+        </button>
+        <div v-if="content.active_3" :style="content.dropdown_left" ref="dropdown_menu_left" style="position:fixed;display: grid;gap:15px;padding:10px;background: black;max-width: 200px;">
+            <a href="#">Action</a>
+            <a href="#">Another action</a>
+            <a href="#">Something else here</a>
+        </div>
+    </div>
+    <div  style="float:right">
+        <button ref="dropdown_btn"  @click="toggleContent(4)">
+            Dropdown button
+        </button>
+        <div v-if="content.active_4" :style="content.dropdown_right" ref="dropdown_menu" style="position:fixed;display: grid;gap:15px;padding:10px;background: black;max-width: 200px;">
+            <a href="#">Action</a>
+            <a href="#">Another action</a>
+            <a href="#">Something else here</a>
+        </div>
+    </div>
+    <br>
     <div style="text-align: right;margin-top: 500px;">
-        <button @mouseenter="toggleContent(2)" ref="tooltip_btn">Button</button>
+        <button @click="toggleContent(2)" ref="tooltip_btn">Button</button>
         <div @mouseleave="toggleContent(2)" v-if="content.active_2" style="position:fixed;max-width: 200px;max-height: 90vh;overflow: scroll;" 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.
@@ -33,7 +54,7 @@
     </div>
 </template>
 <script setup>
-import { ref, reactive, computed } from 'vue'
+import { ref, reactive, onMounted } from 'vue'
 import { getFloating } from './index.js'
 
 const btn = ref(null);
@@ -42,32 +63,53 @@ const element = ref(null);
 const tooltip_btn = ref(null);
 const tooltip_content = ref(null);
 
+const dropdown_btn_left = ref(null);
+const dropdown_menu_left = ref(null);
+
+const dropdown_btn = ref(null);
+const dropdown_menu = ref(null);
+
 const content = reactive({
   position: '',
   position_2: '',
+  dropdown_left: '',
+  dropdown_right: '',
   active: false,
-  active_2: false
+  active_2: false,
+  active_3: false,
+  active_4: false,
+})
+
+onMounted(() => {
+    document.addEventListener('scroll', ()=> {
+        content.active = false
+        content.active_2 = false
+        content.active_3 = false
+        content.active_4 = false
+    })
 })
 
 const toggleContent = (n) => {
     if(n === 1){
         content.active = !content.active 
         setTimeout(() => {
-            content.position = getFloating(btn.value,element.value, 'right', 10, 10)
+            content.position = getFloating(btn.value,element.value, 'top-right', 10, 10)
         })
-
-        window.addEventListener('scroll', () => {
-            content.position = getFloating(btn.value,element.value, 'right', 10, 10)
-        });
-    }else{
+    }else if(n === 2){
         content.active_2 = !content.active_2
         setTimeout(() => {
-            content.position_2 = getFloating(tooltip_btn.value,tooltip_content.value, 'left', 10, 10)
+            content.position_2 = getFloating(tooltip_btn.value,tooltip_content.value, 'top-left', 10, 10)
+        })
+    }else if(n === 3){
+        content.active_3 = !content.active_3
+        setTimeout(() => {
+            content.dropdown_left = getFloating(dropdown_btn_left.value,dropdown_menu_left.value, 'left', 10, 10)
+        })
+    }else if(n === 4){
+        content.active_4 = !content.active_4
+        setTimeout(() => {
+            content.dropdown_right = getFloating(dropdown_btn.value,dropdown_menu.value, 'right', 10, 10)
         })
-
-        window.addEventListener('scroll', () => {
-            content.position_2 = getFloating(tooltip_btn.value,tooltip_content.value, 'left', 10, 10)
-        });
     }
 }
 

packages/@bootwind-helpers/src/index.js

@@ -2,34 +2,45 @@
 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
+        const btnWidth = btn.getBoundingClientRect().width
+        const btnHeight = btn.getBoundingClientRect().height
+        const btnTop = btn.getBoundingClientRect().top
+        const btnLeft = btn.getBoundingClientRect().left
 
-        let top = btnTop + y
+        const elTop = el.getBoundingClientRect().top
+        const elHeight = el.getBoundingClientRect().height
+        const innerWidth = window.innerWidth
 
-        const elTop = el.offsetTop
-        const elHeight = el.offsetHeight
-        const innerHeight = window.innerHeight
+        const topLeftRight = btnTop + btnHeight + y
 
-
-        if(elTop + elHeight > innerHeight){
-            top = innerHeight - elHeight - y
+        if(position === 'left') {
+            return `top:${topLeftRight}px`
         }
 
         if(position === 'right') {
-            const left = btnWidth + btnLeft + x
-            return `left:${left}px;top:${top}px`
+            return `top:${topLeftRight}px`
+        }
+
+
+        let top = btnTop + y
+
+        if(elTop + elHeight > innerHeight){
+            top = innerHeight - elHeight - y
         }
 
-        if(position === 'left') {
-            const right = window.innerWidth - btnLeft + x
+
+        if(position === 'top-left') {
+            const right = innerWidth - btnLeft + x
             return `right:${right}px;top:${top}px`
         }
 
+        if(position === 'top-right') {
+            const left = btnWidth + btnLeft + x
+            return `left:${left}px;top:${top}px`
+        }
+
     }
     return ''
-
 }
 
 export {