floating-vue VS floating-ui

One of the most popular libraries available for creating tooltips, popovers and menus in Vue applications is floating-vue. Although floating-vue provides a Dropdown component, styling it and adding additional functionality, like e.g keyboard navigation, is left up to the user.

One good example of such a use case is tooltips, v-tooltip is a popular library, it's a wrapper for popperjs. This library can be registered as a directive and used as follows

A persistent audio player powered by vue and some visuals from tailwindcss, v-tooltip, v-progress, vue-ionicons & xns-seek-bar

Hello people, the title pretty much says it all so here is a link to Floating UI

Hey nice job! If you want to make the menu slide without moving the button you might want to check https://floating-ui.com/

All popovers and other floating elements were migrated from popperjs to floating ui – it saves some space in your bundle and offers more features out of the box, for example, same width dropdown

Positioning: floating-ui

You could look into Floating UI (before it was called PopperJS). It is mainly used for popovers, but it gives you a lot of flexibility to control the popover position, so it should be possible to make them stick to the right edge of the screen. Also supports React.

Nothing against your project but I recommend anybody looking to implement tooltips, popovers, dropdowns, and other anchored UI to strongly consider starting with floating-ui. It's the fiddly cross browser positioning logic without the interface by someone who's been doing popover libs since jQuery.

You want to make a component and let the users to access its internal DOM node — to position popper, or .focus() it, or whatever.

One good example of such a use case is tooltips, v-tooltip is a popular library, it's a wrapper for popperjs. This library can be registered as a directive and used as follows