openui / openui/open-ui

Add the ability to open a POPOVER for tag A (HTML)

Open
#1,373 4 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

popover
Dominant language
MDX
Stars
4.5k
Forks
226
Avg merge
2d 22h
Merged PRs (30d)
4

Description

Please add the ability to open a POPOVER using the A link tag.

<ul class='Users listPanel'>
<a popovertarget='userInfo' popovertargetaction='show' href='/?id=1' target='userInfo'> User 1 </a>
<a popovertarget='userInfo' popovertargetaction='show' href='/?id=2' target='userInfo'> User 2 </a>
<a popovertarget='userInfo' popovertargetaction='show' href='/?id=3' target='userInfo'> User 3 </a>
<a popovertarget='userInfo' popovertargetaction='show' href='/?id=4' target='userInfo'> User 4 </a>
</ul>
<iframe id='userInfo' popover='auto' class='dockPanel' loading=lazy >
<!-- HTML document contain information for one user -->
</iframe>

Each link loads data for the IFRAME tag, i.e. it loads properties and parameters for each user separately. When you need to view detailed information about an individual user. But the link does not allow to open the POPOVER window panel (right panel). I have to use JS.

This would make it easier for a very large number of people to work with HTML without JS. I'm sure every layout designer faces this all the time.

But unfortunately POPOVER only works for buttons.

An example with a name for a dock panel

<ul class='Users listPanel'>
<a popovertarget='dockPanel' popovertargetaction='show' href='/?id=1' target='userInfo'> User 1 </a>
<a popovertarget='dockPanel' popovertargetaction='show' href='/?id=2' target='userInfo'> User 2 </a>
<a popovertarget='dockPanel' popovertargetaction='show' href='/?id=3' target='userInfo'> User 3 </a>
<a popovertarget='dockPanel' popovertargetaction='show' href='/?id=4' target='userInfo'> User 4 </a>
</ul>
<div id='dockPanel' popover='auto' >
<h4>User info</h4>
<iframe id='userInfo' loading=lazy >
<!-- HTML document contain information for one user -->
</iframe>
</div>

I fully understand the meaning of the button. The button when to perform an action inside the page. And the link is needed to navigate to a new page. But we see a frequent case when both scenarios are executed at once.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the issue's anchor, popover, and iframe examples, then review the existing HTML Popover API behavior for buttons and links. Determine the required semantics for opening the popover while navigating or loading the targeted iframe. Done means the proposal clearly specifies anchor activation, popovertarget behavior, and navigation interactions.

Written by the indexing model from the issue text.

Assessment

Tech stack
html
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.