https://github.com/andersclark/popover-examples

Examples of uses of the Popover API
https://github.com/andersclark/popover-examples

css html javascript popover

Last synced: 26 days ago
JSON representation

Examples of uses of the Popover API

• Host: GitHub
• URL: https://github.com/andersclark/popover-examples
• Owner: Andersclark
• Created: 2024-05-03T06:46:00.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-05-18T09:00:36.000Z (6 months ago)
• Last Synced: 2024-05-18T11:23:44.804Z (6 months ago)
• Topics: css, html, javascript, popover
• Language: TypeScript
• Homepage:
• Size: 43 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Dialog and Popover Examples

By Anders ([Clark](https://github.com/Andersclark) || [Ringqvist](https://github.com/anddoutoi))

## What is this?

In 2022 the `` 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 `` element, which overlaps in function somewhat.

## How to use

*Requires [NPM](https://docs.npmjs.com/downloading-and-installing-node-js-and-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