- Components
- Popover
Overlays
Tailwind CSS Popover
Tailwind CSS Popovers offer dismissible, interactive elements with custom content. Create user-friendly interfaces with clickable areas and in-popover interactions.
Requires JS
Note that this component requires the use of the third-party Popper.js plugin, else you can skip this message if you are already using Preline UI as a package.
When to use
Popover are typically dismissable, whether by click on other parts of the page or second clicking the popover target (depending on implementation), for that reason you can set up a popover to allow you to interact with other elements on the page while still being able to read it's content.
On top of that, since popover will remain open when mousing out of their target you can add additional buttons or interactions within them:
Conclusion
If you want to add any additional content, interactions, or content more than about a line; or if you need the content to remain open without the target being mousedover use a popover.
Although it should be noted due to accessibility problems, potential SEO issues, and lack of discovery of the popover, it's not recommended unless you absolutely need it.
