feat: update html tooltip API / use command attr#151
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
There was a problem hiding this comment.
Pull Request Overview
This pull request refactors the tooltip and popover components to simplify their API and improve maintainability. The changes consolidate the multi-element tooltip structure into a single media-tooltip element and update trigger associations to use the commandfor attribute instead of popovertarget.
- Consolidated tooltip markup from multiple nested elements to a single
media-tooltipelement with direct attributes - Updated trigger mechanism to use
commandforinstead ofpopovertargetfor better semantic consistency - Simplified CSS selectors to target
media-tooltipdirectly and improved state-based styling approach
Reviewed Changes
Copilot reviewed 12 out of 12 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| site/src/utils/ejectCodeGenerator.ts | Updates HTML generation to use simplified tooltip structure and new commandfor attribute |
| packages/html/src/skins/minimal/styles.css | Changes CSS selectors from media-tooltip-popup to media-tooltip and updates state selectors |
| packages/html/src/skins/minimal/index.ts | Updates template to use consolidated tooltip markup structure |
| packages/html/src/skins/frosted/styles.css | Changes CSS selectors from media-tooltip-popup to media-tooltip and updates state selectors |
| packages/html/src/skins/frosted/index.ts | Updates template to use consolidated tooltip markup structure |
| packages/html/src/elements/tooltip.ts | Major refactor consolidating multiple tooltip classes into single TooltipElement class |
| packages/html/src/elements/popover.ts | Updates trigger selector and adds cleanup logic for memory management |
| packages/html/src/define/media-tooltip.ts | Simplifies custom element definitions to only register media-tooltip |
| examples/html-eject-minimal/src/minimal.css | Updates CSS selectors for simplified tooltip structure |
| examples/html-eject-minimal/index.html | Updates HTML markup to use new consolidated tooltip structure |
| examples/html-eject-frosted/src/frosted.css | Updates CSS selectors for simplified tooltip structure |
| examples/html-eject-frosted/index.html | Updates HTML markup to use new consolidated tooltip structure |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request refactors the tooltip and popover components in the HTML media player examples and supporting code, simplifying their structure and improving accessibility and maintainability. The most significant changes include consolidating the tooltip implementation, updating the way tooltips and popovers are triggered, and streamlining the CSS selectors and styles.
Component Structure and Triggering
Refactored tooltip markup in
index.htmlfiles (examples/html-eject-frosted/index.html,examples/html-eject-minimal/index.html) to use a singlemedia-tooltipelement with direct attributes for configuration, replacing the previous complex nested structure (media-tooltip-trigger,media-tooltip-portal, etc.). Tooltip and popover triggers now use thecommandforattribute instead ofpopovertarget, and popovers usepopover="manual"for explicit control. [1] [2] [3] [4]Updated the popover and tooltip JavaScript classes to use the new
commandforattribute for trigger association and simplified custom element definitions to only requiremedia-tooltip. [1] [2]Tooltip and Popover Styling
media-tooltipdirectly instead ofmedia-tooltip-popup, and updated selectors for showing/hiding tooltip text based on media state. [1] [2] [3] [4] [5]Tooltip Functionality and Accessibility
TooltipElementclass, add accessibility roles, support new attributes (side,side-offset,collision-padding), and useAbortControllerfor event listener cleanup. [1] [2]Component API Consistency
media-volume-slider-indicatorinstead ofmedia-volume-slider-progressfor consistency with the component API. [1] [2]Popover Lifecycle Management
This refactor streamlines the tooltip and popover implementation, making the codebase easier to maintain and improving the accessibility and configurability of media controls.