-
Notifications
You must be signed in to change notification settings - Fork 1.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Add popover=hint example * Update tooltip wording * correct event listener * Add source options and remove CSS anchor references; take advantage of implicit anchor references * Add help paragraph * another tweak to the help box * Update README.md --------- Co-authored-by: Brian Smith <[email protected]>
- Loading branch information
1 parent
8884ad4
commit 773e0af
Showing
5 changed files
with
239 additions
and
9 deletions.
There are no files selected for viewing
This file contains 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
This file contains 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
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,136 @@ | ||
| /* General styling */ | ||
|
|
||
| * { | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| html { | ||
| font-family: sans-serif; | ||
| height: 100%; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| body { | ||
| height: inherit; | ||
| background: #ccc; | ||
| margin: 0; | ||
| } | ||
|
|
||
| #wrapper { | ||
| height: inherit; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
|
|
||
| /* Button bar styling */ | ||
|
|
||
| #button-bar { | ||
| height: 48px; | ||
| width: 30%; | ||
| min-width: 300px; | ||
| padding: 8px; | ||
| border-radius: 6px; | ||
| background: #eee; | ||
| box-shadow: 1px 1px 3px #999; | ||
| display: flex; | ||
| justify-content: space-around; | ||
| gap: 10px; | ||
| } | ||
|
|
||
| /* Button styling */ | ||
|
|
||
| #button-bar button { | ||
| border: 1px solid #999; | ||
| border-radius: 4px; | ||
| background: #eee; | ||
| flex: 1; | ||
| } | ||
|
|
||
| #button-bar button:hover, | ||
| #button-bar button:focus { | ||
| background: #ccc; | ||
| } | ||
|
|
||
| #button-bar button:active { | ||
| box-shadow: inset 1px 1px 2px #333, inset -1px -1px 2px #eee; | ||
| } | ||
|
|
||
| /* Styling auto popovers */ | ||
|
|
||
| [popover="auto"] { | ||
| inset: unset; | ||
| position: absolute; | ||
| bottom: calc(anchor(top) + 20px); | ||
| justify-self: anchor-center; | ||
| margin: 0; | ||
|
|
||
| width: 200px; | ||
| text-align: center; | ||
| padding: 8px; | ||
| border-radius: 6px; | ||
| background: #eee; | ||
| box-shadow: 1px 1px 3px #999; | ||
| border: none; | ||
| } | ||
|
|
||
| [popover="auto"] button { | ||
| border: 1px solid #999; | ||
| border-radius: 4px; | ||
| background: #eee; | ||
| width: 100%; | ||
| line-height: 1.5; | ||
| } | ||
|
|
||
| [popover="auto"] button:first-of-type { | ||
| margin-bottom: 8px; | ||
| } | ||
|
|
||
| [popover="auto"] button:hover, | ||
| [popover="auto"] button:focus { | ||
| background: #ccc; | ||
| } | ||
|
|
||
| [popover="auto"] button:active { | ||
| box-shadow: inset 1px 1px 2px #333, inset -1px -1px 2px #eee; | ||
| } | ||
|
|
||
| /* Styling hint popovers */ | ||
|
|
||
| [popover="hint"] { | ||
| inset: unset; | ||
| position: absolute; | ||
| top: calc(anchor(bottom) + 5px); | ||
| justify-self: anchor-center; | ||
| margin: 0; | ||
|
|
||
| padding: 8px; | ||
| border-radius: 6px; | ||
| background: #271717; | ||
| color: whitesmoke; | ||
| box-shadow: 1px 1px 3px #999; | ||
| border: none; | ||
| } | ||
|
|
||
| /* Styling help para */ | ||
|
|
||
| .help-para { | ||
| position: absolute; | ||
| top: 16px; | ||
| left: 16px; | ||
| background: #eee; | ||
| font-size: 0.8rem; | ||
| line-height: 1.3; | ||
| width: 50%; | ||
| max-width: 600px; | ||
| margin: 0; | ||
| padding: 16px; | ||
| box-shadow: 1px 1px 3px #999; | ||
| } | ||
|
|
||
| @media (max-width: 640px) { | ||
| .help-para { | ||
| width: auto; | ||
| right: 16px; | ||
| } | ||
| } |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
| <title>Popover hint example</title> | ||
| <link href="index.css" rel="stylesheet" /> | ||
| <script src="index.js" defer></script> | ||
| </head> | ||
| <body> | ||
| <div id="wrapper"> | ||
| <section id="button-bar"> | ||
| <button | ||
| popovertarget="submenu-1" | ||
| popovertargetaction="toggle" | ||
| id="menu-1"> | ||
| Menu A | ||
| </button> | ||
|
|
||
| <button | ||
| popovertarget="submenu-2" | ||
| popovertargetaction="toggle" | ||
| id="menu-2"> | ||
| Menu B | ||
| </button> | ||
|
|
||
| <button | ||
| popovertarget="submenu-3" | ||
| popovertargetaction="toggle" | ||
| id="menu-3"> | ||
| Menu C | ||
| </button> | ||
| </section> | ||
| </div> | ||
|
|
||
| <p class="help-para"> | ||
| Press the buttons to show the auto popovers. Hover or focus the buttons to | ||
| show the hint popovers. When an auto popover is shown, you can show the | ||
| hint popovers without hiding it. See | ||
| <a | ||
| href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using#using_hint_popover_state" | ||
| >Using "hint" popover state</a | ||
| > | ||
| for more information. Note that in non-supporting browsers, the position | ||
| of the popovers is broken. | ||
| </p> | ||
|
|
||
| <div id="submenu-1" popover="auto"> | ||
| <button>Option A</button><br /><button>Option B</button> | ||
| </div> | ||
| <div id="submenu-2" popover="auto"> | ||
| <button>Option A</button><br /><button>Option B</button> | ||
| </div> | ||
| <div id="submenu-3" popover="auto"> | ||
| <button>Option A</button><br /><button>Option B</button> | ||
| </div> | ||
|
|
||
| <div id="tooltip-1" class="tooltip" popover="hint">Tooltip A</div> | ||
| <div id="tooltip-2" class="tooltip" popover="hint">Tooltip B</div> | ||
| <div id="tooltip-3" class="tooltip" popover="hint">Tooltip C</div> | ||
| </body> | ||
| </html> |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| const tooltips = document.querySelectorAll(".tooltip"); | ||
| const btns = document.querySelectorAll("#button-bar button"); | ||
|
|
||
| function addEventListeners(i) { | ||
| btns[i].addEventListener("mouseover", () => { | ||
| tooltips[i].showPopover({ source: btns[i] }); | ||
| }); | ||
|
|
||
| btns[i].addEventListener("mouseout", () => { | ||
| tooltips[i].hidePopover(); | ||
| }); | ||
|
|
||
| btns[i].addEventListener("focus", () => { | ||
| tooltips[i].showPopover({ source: btns[i] }); | ||
| }); | ||
|
|
||
| btns[i].addEventListener("blur", () => { | ||
| tooltips[i].hidePopover(); | ||
| }); | ||
| } | ||
|
|
||
| for (let i = 0; i < btns.length; i++) { | ||
| addEventListeners(i); | ||
| } |