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)...
- Removing
autoPlacement()completely; bottom works (as per default) - When the tooltip occurs at the top of the viewport,
autoPlacement()successfully moves it to the bottom. - 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()
]
}
)