Overlay
Popover
Popover is a small panel that appears beside its trigger when clicked and holds interactive content like buttons, inputs, or a list.
Definition
A popover is a small panel that appears right beside an element, called the trigger, when you click it. A tooltip just shows a short hint and stops there, but a popover can hold things you actually operate, like buttons, input fields, or a list. Think of the copy-link panel that pops up when you click a share button, or the condition picker that opens next to a filter icon. Because the popover attaches near its trigger instead of covering the whole screen, the user never loses track of what they just clicked to bring it up, and the context stays right in front of them.
Why does it matter?
A popover fills the exact gap between a tooltip and a modal. It sits lightly beside its trigger like a tooltip, but you can actually do things inside it, and it holds interaction like a modal without dimming the screen or breaking your flow. That makes it a great fit for quick jobs that are over in a moment, such as flipping a small setting, picking from a short menu, or copying a link. It opens only when you need it and quietly disappears once you are done, so you can handle little tasks right where you are, without jumping to another page or launching a big window. Saving the heavy modal for when it truly matters keeps the user's flow much smoother and stops the screen from getting more cluttered than it needs to be. In the end, a screen that uses popovers well settles into a nice rhythm: small things happen lightly, on the spot, and only the big decisions get the weight of a modal.
Common mistakes
- Mixing up popovers and tooltips. If you put a plain hint inside a popover that opens on click, or stuff an action panel with buttons into a tooltip that appears on hover, the user stops knowing what to expect and when.
- Not letting an outside click close it. A popover is a light panel you use for a second and move on, so if clicking elsewhere doesn't dismiss it, it lingers on the screen and gets in the way.
- Cramming content so big and complex that it nearly covers the screen. Work that heavy belongs in a modal or a separate page rather than a small panel pinned beside a trigger, and forcing it into a popover tends to push it out of place or clip it off the edge of the screen.
Practical tips
- A popover differs from a tooltip in that it opens on click and lets you interact inside, and it differs from a modal in that it stays beside the trigger instead of covering the screen. Lean into that character and use it for quick, in-context jobs like sharing, filtering, or a simple menu.
- Make the popover close when the user clicks outside it or presses the ESC key. Opening and closing should feel light, so people open it freely and move on naturally once they are done.
- Tie the trigger and the panel together visually. Add a little arrow tail or place the panel right up against the trigger, so it's obvious at a glance that this panel came out of the button you just clicked and the context never gets lost.
Ask your AI
Look at the UI requirement I'll paste below and decide whether it should be a popover, a tooltip, or a modal. Judge by these rules: if it opens on click and holds things you actually operate — buttons, inputs, a list — it's a popover; if it appears on hover and only shows a short hint, it's a tooltip; if the task is heavy and complex enough to dim and cover the screen, it's a modal. For [feature — e.g. a copy-link panel next to a share button], pick one of the three and give me a one-line reason. If it's a popover, keep it pinned right beside the trigger so the context stays visible; if it's really heavy, tell me to move it to a modal or a separate page.
Build a popover that appears right beside [trigger — e.g. a filter icon button] when it's clicked. Open it next to the trigger on click, and put [contents — e.g. condition checkboxes and an Apply button] inside. Make it close when the user clicks outside it or presses the ESC key, and add a small arrow tail or butt it right up against the trigger so it's obvious the panel came out of the button just clicked. Also flip the panel to the opposite side when the trigger sits near a screen edge, so it never gets clipped off the edge. Keep the contents light enough for a quick job so it never grows large enough to cover the screen.
Review the popover code I'll paste below and fix anything that breaks the popover rules. First check that it closes on both an outside click and the ESC key, and add whichever one is missing. If it only opens on hover but holds buttons or inputs, switch it to a popover that opens on click; if it holds nothing but a short hint, turn it into a tooltip instead. When the trigger is near a screen edge, flip the panel so it isn't clipped off the edge, and if the link to the trigger is unclear, add an arrow tail or place the panel right against it. Summarize what you changed as 'problem → fix'.