Dialog and Popover Examples

By Anders (Clark || Ringqvist)

What is this?

In 2022 the <dialog> html element received widespread support in all major browsers. The popover property received the same in April 2024. These features help make modals, popups, context-menus, tooltips and more accessible, performant and MUCH less reliant on Javascript.

This repository contains some explorations into how to use the Popover API as well as the <dialog> element, which overlaps in function somewhat.

How to use

Requires NPM

Single command line input

git clone https://github.com/Andersclark/popover-examples.git && cd popover-examples && npm install && npm run dev

Step by step

1. Clone repo: git clone https://github.com/Andersclark/popover-examples.git
2. Move terminal inside repo: cd popover-examples
3. Install dependencies: npm install
4. Start development server: npm run dev
5. Navigate browser to address displayed in terminal