Add the ability to open a POPOVER for tag A (HTML)
Nobody has claimed this yet.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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