floating-ui VS react-popper

Floating UI, formerly known as Popper.js, is a library for creating dynamic and responsive tooltips, pop-overs, dropdowns, and other floating widgets. Its powerful positioning engine ensures that elements are always displayed correctly, even in complex layouts.

For this small snippet, I've used JS Popover API (HTMLElement.showPopover & HTMLElement.hidePopover) and Floating UI for Tooltip positioning. Check it out:

Floating UI (Tooltips): Floating UI for interactive tooltips

Floating UI (28.7k ⭐) — A JavaScript library that helps you create and position floating elements such as tooltips, popovers, dropdowns, and more. It also provides hooks and components for building accessible user interactions with React. Floating UI is smart, flexible, and platform-agnostic. Floating UI is the evolution of Popper 2, designed to bring the project to a new level.

Built-in anchor positioning: With Floating UI, components like Menu and Listbox automatically position their popovers, anchoring them to their triggers and allowing them to adjust to changes in the viewport quickly.

Shepherd is a powerful and customizable open source JavaScript library for creating interactive tours and onboarding experiences in web applications. It uses another open source library Floating UI to render the dialog tours. It offers a simple setup process, dynamic content support, the ability to create custom actions and events, and theming and styling too. More importantly, it is responsive too and never goes offscreen on smaller devices. Shepherd also provides excellent documentation and support, making it a popular choice among developers.

Check https://floating-ui.com/

As you stated, it's generally best to suggest going with the native application for handling the styling of the select options. That said, when I do need to reach for a nice lightweight solution, I have really enjoyed popper.js now known as Floating UI. The library is suitable for multiple UI patterns such as tooltips, popovers, selects, dialogs, dropdowns and comboboxes, meaning you get more mileage out of the small amount of additional file size.

Or you can use some kind of library like this https://github.com/popperjs/react-popper

With over 9,000 stars on the project on GitHub, Reactstrap provides a stateless and simple React components support for Bootstrap 4. It is easy to use with good documentation, that way there is no learning curve. It does not depend on jQuery or the JavScript that ships with Bootstrap only popper through the React popper package.