Default bottom placement not respected when using floating-ui autoPlacement()

30 Views Asked by At

I'm using floating-ui with Vue to make floating tooltips.

One feature of floating-ui is autoPlacement(), where in real-time the floated element will dynamically re-position itself according to space available. E.g. if a tooltip occurs near the viewport edge, it will re-position itself to maintain visibility.

Everything works, however, my "tooltip-with-autoplacement" seems to favor placement on the right no matter how much surrounding space is available. I tested various combinations of margin/padding/width/height on the reference element and parent container.

Confirmed proper bottom placement does indeed work in other conditions (but none of these are ideal scenarios)...

  1. Removing autoPlacement() completely; bottom works (as per default)
  2. When the tooltip occurs at the top of the viewport, autoPlacement() successfully moves it to the bottom.
  3. If I restrict placements in autoPlacement() options: allowedPlacements: ['bottom', 'left']

So AFAICT, bottom placement works just fine, I just want to strongly prefer it for autoPlacement().

QUESTION: When using autoPlacement(), how can I reliably make the tooltip open towards the bottom (when given ample space)?

CODE:

import { useFloating, autoPlacement } from '@floating-ui/vue'

const referenceElement = ref()
const floatingElement = ref()
const { floatingStyles } = useFloating(
    referenceElement,
    floatingElement,
    {
        placement: 'bottom', // Necessary? Doing anyways.
        middleware: [
            autoPlacement()
        ]
    }
)
0

There are 0 best solutions below