This set of examples demonstrates usage of the Popover API (also see the specification).
- Basic declarative popover example: Demonstrates a basic auto state popover.
- Blur background popover example: Shows how you can add styling to the content behind the popover using the
::backdroppseudo-element. - Multiple auto popovers example: Demonstrates that, generally, only one auto popover can be displayed at once.
- Multiple manual popovers example: Demonstrates that multiple manual popovers can be displayed at once, bt they can't be light-dismissed.
- Nested popover menu example: Demonstrates the behavior of nested auto state popovers.
- popover="hint" example: This example shows how to use the
popover="hint"value to create tooltip popovers that show on button mouseover and focus, without dismissing theautopopovers shown when the buttons are clicked on. Thehintpopovers are controlled via JavaScript. - Popover positioning example: An isolated example showing CSS overriding of the default popover positioning specified by the UA sylesheet.
- Toggle help UI example: Shows the basics of using JavaScript to control popover showing and hiding.
- Toast popovers example: Illustrates how to make a simple system of "toast" notifications with popovers, which automatically hide again after a certain time.