Been struggling for a while of creating a dropdown menu which auto adjusts when the element goes beyond the document's bounds.
Libraries used:
<script setup>
import { createPopper } from '@popperjs/core'
const popperInstance = ref(null)
const popcorn = ref(null)
const tooltip = ref(null)
onMounted(() => {
useEventListener(popcorn.value, 'click', show)
onClickOutside(popcorn.value, hide)
popperInstance.value = createPopper(popcorn.value, tooltip.value, {
placement: 'right-start',
modifiers: [
{
name: 'offset',
options: {
offset: [0, 8]
}
}
]
})
})
function show () {
tooltip.value.setAttribute('data-show', '')
popperInstance.value.update()
}
function hide () {
tooltip.value.removeAttribute('data-show')
}
</script>
<template>
<div>
<div
ref="tooltip"
class="
tooltip
bg-neutral-900
rounded
p-2
text-white
text-xs
w-[100px]
"
>
<div
class="arrow"
data-popper-arrow
></div>
<ul>
<li
v-for="i in 5"
:key="i"
class="
px-2 py-2
bg-neutral-900 hover:bg-neutral-800
rounded
"
>
Hey
</li>
</ul>
</div>
<button
ref="popcorn"
class="
popcorn
bg-blue-500
text-white
px-3 py-2
rounded
"
>
Add
</button>
</div>
</template>
<style lang="scss" scoped>
.tooltip {
display: none;
}
.tooltip[data-show] {
display: block;
}
.arrow,
.arrow::before {
position: absolute;
width: 8px;
height: 8px;
background: inherit;
}
.arrow {
visibility: hidden;
}
.arrow::before {
visibility: visible;
content: '';
transform: rotate(45deg);
}
.tooltip[data-popper-placement^='top'] > .arrow {
bottom: -4px;
}
.tooltip[data-popper-placement^='bottom'] > .arrow {
top: -4px;
}
.tooltip[data-popper-placement^='left'] > .arrow {
right: -4px;
}
.tooltip[data-popper-placement^='right'] > .arrow {
left: -4px;
}
</style>
Top comments (0)