Popover - Ensure PopoverPanel is visible despite overflow-hidden

[filonik]

I want to show a popover inside of an element with overflow-hidden. However, the PopoverPanel ends up getting clipped. Unfortunately, overflow-hidden is required for my use case. How can I make sure that the PopoverPanel is fully visible?

A simplified example:

<template>
  <div class="flex flex-row h-full">
    <nav class="flex-none flex flex-col items-center p-2 w-16 bg-yellow-200 overflow-hidden">
      <Popover class="relative">
        <PopoverButton class="w-12 h-12 bg-green-200"> Show </PopoverButton>
        <transition
          enter-active-class="transition duration-200 ease-out"
          enter-from-class="translate-y-1 opacity-0"
          enter-to-class="translate-y-0 opacity-100"
          leave-active-class="transition duration-150 ease-in"
          leave-from-class="translate-y-0 opacity-100"
          leave-to-class="translate-y-1 opacity-0"
        >
          <PopoverPanel class="absolute w-80 z-10">
            <div class="p-2 bg-gray-900 rounded-lg shadow-lg ring-1 ring-white ring-opacity-10">
              Content
            </div>
          </PopoverPanel>
        </transition>
      </Popover>
    </nav>
    <main class="flex-grow bg-red-200"></main>
  </div>
</template>

<script>
import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";

export default {
  components: { Popover, PopoverButton, PopoverPanel },
};
</script>

<style>
#app {
  height: 100vh;
}
</style>

See working CodeSandbox here:

https://codesandbox.io/embed/headlessui-vue-menu-example-forked-s05je?fontsize=14&hidenavigation=1&theme=dark

I tried using a Teleport, but that messes up the positioning of the PopoverPanel. If this is the way to go, could somebody explain how to modify the example to make it work?

Edit: To clarify, this is what it looks like:

And this is what I would like to see:

[LoganDark]

The PopoverButton can be arbitrarily nested inside of the Popover. Try this:

1. Put your overflow:hidden container inside of the Popover component. The PopoverButton would be in there as normal.
2. Put the PopoverPanel outside of the overflow:hidden container, so it won't be clipped by it.
3. You can use a library like PopperJS to dynamically position the PopoverPanel relative to the PopoverButton even if they are in different parts of the DOM.

Alternatively (say the overflow:hidden element is your nav, and you need multiple popovers inside), create a portal inside the PopoverPanel (use as={React.Fragment}) that leads to somewhere else, and use PopperJS to position the popover.

[filonik]

Thanks for the reply. Yes, using PopperJS made all the problems go away. I was hoping there would be a way without pulling in an extra dependency, but any solution that addresses the overflow issue (restructure the DOM, use a portal) always results in tricky positioning. I could write my own positioning code, but I worry that it won't be as robust as PopperJS, so I guess I might as well go with that.

It would still be nice if Headless UI had built in support for using Popover with Portal to deal with the positioning.

[LoganDark]

PopperJS is a nice dependency to have regardless. I use it for positioning context menus as well so that they always stay on screen. Although a static website probably won't need that.

[bennettdams]

I have a reusable Card component all over the place that just bring some styling and render children. This component has overflow-hidden.
Now I want to show a popover at any nested level of the children - imagine the Card renders a multiple divs until finally the Popover is rendered. The Popover can be bigger than the Card it is rendered in.
In this scenario, what Is the correct way for Popover.Panel to break out of the grand-grand-grandparent's overflow-hidden? There has to be a way with CSS/React portals, I just don't know it 😅

[stathis1998]

The solutions I found was use RadixUI that does positioning relative to the trigger (button) using position fixed and/or portals by default alongside all other accessibility options it comes bundled with.