Add popover=hint example #295
Conversation
chrisdavidmills
requested review from
pepelsbey
and removed request for
a team
popover-api/popover-hint/index.css
Outdated
| } | ||
|
|
||
| #submenu-1 { | ||
| position-anchor: --menu-anchor-1; |
There was a problem hiding this comment.
You shouldn't need to add position-anchor or anchor-name to anything in these demos, if you just add showPopover({source: invoker}) to the JS bit. Declarative popovertarget activation automatically creates an implicit anchor reference, as does using source in showPopover().
There was a problem hiding this comment.
@mfreed7 Nice! That works like a charm. Updated.
QQ: We don't actually have the show option documented on MDN. I'm going to add it in the PR associated with this demo, but I should also add a compat data entry for it at some point. When was show first supported?
There was a problem hiding this comment.
Great! Yeah, I think that's an outstanding item: mdn/mdn#598. It's been shipped in Chromium since M133.
…f implicit anchor references
|
@bsmth are you OK to have a look at this one? Alternatively, @pepelsbey might enjoy reviewing it ;-) |
…/dom-examples into add-popover=hint-example
| [popover="hint"] { | ||
| inset: unset; | ||
| position: absolute; | ||
| top: calc(anchor(bottom) + 5px); |
There was a problem hiding this comment.
Only issue I have with this is that it looks weird on browsers that don't support it, you get a tooltip off the bottom of the page and some scrollbars on mouseover. It looks like it's hard to do proper feature detection on that level of granularity (specifically ~supports popover = hint), isn't it?
There was a problem hiding this comment.
You could feature detect based on the popover property of the DOM element, but it'd be a right pain building an alternative that still provides an acceptable experience in non-supporting browsers. What do think is needed here?
There was a problem hiding this comment.
Yeah I figured as much. I'm not sure what the best option is, maybe a note somewhere about browser compat (in the readme where we link to it)? At least that we flag it's a known thing in browsers that don't support it.
There was a problem hiding this comment.
OK, I've added in a note about browser support, and added in a media query to stop the note box from covering the button bar on narrow screens
This PR adds a demo to demonstrate typical usage of the
popover="hint"attribute value, which is supported in Chrome 133.