Skip to content

Commit 773e0af

Browse files
chrisdavidmillsbsmth
chrisdavidmills
and
bsmth
authored
Add popover=hint example (#295)
* 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]>
1 parent 8884ad4 commit 773e0af

File tree

5 files changed

+239
-9
lines changed

5 files changed

+239
-9
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ Code examples that accompany various MDN DOM and Web API documentation pages.
5151

5252
- The "pointer-lock" directory contains a basic demo to show usage of the Pointer Lock API. You can find more explanation of how the demo works at the main MDN [Pointer Lock API](https://developer.mozilla.org/docs/Web/API/Pointer_Lock_API) page. [Run the demo live](https://mdn.github.io/dom-examples/pointer-lock/).
5353

54-
- The "popover-api" directory is for examples and demos of the [Popover API](https://developer.mozilla.org/docs/Web/API/Popover_API) standard. Go to the [Popover API demo index](popover-api/) to see what's available.
54+
- The "popover-api" directory is for examples and demos of the [Popover API](https://developer.mozilla.org/docs/Web/API/Popover_API) standard. Go to the [Popover API demo index](https://mdn.github.io/dom-examples/popover-api/) to see what's available.
5555

5656
- The "reporting-api" directory contains a couple of basic demos to show usage of the Reporting API. You can find more explanation of how the API works in the main MDN [Reporting API](https://developer.mozilla.org/docs/Web/API/Reporting_API) docs. [Run the deprecation report demo live](https://mdn.github.io/dom-examples/reporting-api/deprecation_report.html).
5757

‎popover-api/index.html‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,14 @@ <h1>MDN Popover API examples</h1>
2424
Demonstrates a basic auto state popover.
2525
</li>
2626
<li>
27-
<a href="blur-background/">Blur background popover example</a>: Shows how
28-
you can add styling to the content behind the popover using the
27+
<a href="blur-background/">Blur background popover example</a>: Shows
28+
how you can add styling to the content behind the popover using the
2929
<code>::backdrop</code> pseudo-element.
3030
</li>
3131
<li>
32-
<a href="multiple-auto/">Multiple auto popovers example</a>: Demonstrates
33-
that, generally, only one auto popover can be displayed at once.
32+
<a href="multiple-auto/">Multiple auto popovers example</a>:
33+
Demonstrates that, generally, only one auto popover can be displayed at
34+
once.
3435
</li>
3536
<li>
3637
<a href="multiple-manual/">Multiple manual popovers example</a>:
@@ -41,14 +42,21 @@ <h1>MDN Popover API examples</h1>
4142
<a href="nested-popovers/">Nested popover menu example</a>: Demonstrates
4243
the behavior of nested auto state popovers.
4344
</li>
45+
<li>
46+
<a href="popover-hint/">popover="hint" example</a>: This example shows
47+
how to use the <code>popover="hint"</code> value to create tooltip
48+
popovers that show on button mouseover and focus, without dismissing the
49+
<code>auto</code> popovers shown when the buttons are clicked on. The
50+
<code>hint</code> popovers are controlled via JavaScript.
51+
</li>
4452
<li>
4553
<a href="popover-positioning/">Popover positioning example</a>: An
46-
isolated example showing CSS overriding of the default popover positioning
47-
specified by the UA sylesheet.
54+
isolated example showing CSS overriding of the default popover
55+
positioning specified by the UA sylesheet.
4856
</li>
4957
<li>
50-
<a href="toggle-help-ui/">Toggle help UI example</a>: Shows the basics of
51-
using JavaScript to control popover showing and hiding.
58+
<a href="toggle-help-ui/">Toggle help UI example</a>: Shows the basics
59+
of using JavaScript to control popover showing and hiding.
5260
</li>
5361
<li>
5462
<a href="toast-popovers/">Toast popovers example</a>: Illustrates how to

‎popover-api/popover-hint/index.css‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
/* General styling */
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
html {
8+
font-family: sans-serif;
9+
height: 100%;
10+
overflow: hidden;
11+
}
12+
13+
body {
14+
height: inherit;
15+
background: #ccc;
16+
margin: 0;
17+
}
18+
19+
#wrapper {
20+
height: inherit;
21+
display: flex;
22+
justify-content: center;
23+
align-items: center;
24+
}
25+
26+
/* Button bar styling */
27+
28+
#button-bar {
29+
height: 48px;
30+
width: 30%;
31+
min-width: 300px;
32+
padding: 8px;
33+
border-radius: 6px;
34+
background: #eee;
35+
box-shadow: 1px 1px 3px #999;
36+
display: flex;
37+
justify-content: space-around;
38+
gap: 10px;
39+
}
40+
41+
/* Button styling */
42+
43+
#button-bar button {
44+
border: 1px solid #999;
45+
border-radius: 4px;
46+
background: #eee;
47+
flex: 1;
48+
}
49+
50+
#button-bar button:hover,
51+
#button-bar button:focus {
52+
background: #ccc;
53+
}
54+
55+
#button-bar button:active {
56+
box-shadow: inset 1px 1px 2px #333, inset -1px -1px 2px #eee;
57+
}
58+
59+
/* Styling auto popovers */
60+
61+
[popover="auto"] {
62+
inset: unset;
63+
position: absolute;
64+
bottom: calc(anchor(top) + 20px);
65+
justify-self: anchor-center;
66+
margin: 0;
67+
68+
width: 200px;
69+
text-align: center;
70+
padding: 8px;
71+
border-radius: 6px;
72+
background: #eee;
73+
box-shadow: 1px 1px 3px #999;
74+
border: none;
75+
}
76+
77+
[popover="auto"] button {
78+
border: 1px solid #999;
79+
border-radius: 4px;
80+
background: #eee;
81+
width: 100%;
82+
line-height: 1.5;
83+
}
84+
85+
[popover="auto"] button:first-of-type {
86+
margin-bottom: 8px;
87+
}
88+
89+
[popover="auto"] button:hover,
90+
[popover="auto"] button:focus {
91+
background: #ccc;
92+
}
93+
94+
[popover="auto"] button:active {
95+
box-shadow: inset 1px 1px 2px #333, inset -1px -1px 2px #eee;
96+
}
97+
98+
/* Styling hint popovers */
99+
100+
[popover="hint"] {
101+
inset: unset;
102+
position: absolute;
103+
top: calc(anchor(bottom) + 5px);
104+
justify-self: anchor-center;
105+
margin: 0;
106+
107+
padding: 8px;
108+
border-radius: 6px;
109+
background: #271717;
110+
color: whitesmoke;
111+
box-shadow: 1px 1px 3px #999;
112+
border: none;
113+
}
114+
115+
/* Styling help para */
116+
117+
.help-para {
118+
position: absolute;
119+
top: 16px;
120+
left: 16px;
121+
background: #eee;
122+
font-size: 0.8rem;
123+
line-height: 1.3;
124+
width: 50%;
125+
max-width: 600px;
126+
margin: 0;
127+
padding: 16px;
128+
box-shadow: 1px 1px 3px #999;
129+
}
130+
131+
@media (max-width: 640px) {
132+
.help-para {
133+
width: auto;
134+
right: 16px;
135+
}
136+
}

‎popover-api/popover-hint/index.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Popover hint example</title>
7+
<link href="index.css" rel="stylesheet" />
8+
<script src="index.js" defer></script>
9+
</head>
10+
<body>
11+
<div id="wrapper">
12+
<section id="button-bar">
13+
<button
14+
popovertarget="submenu-1"
15+
popovertargetaction="toggle"
16+
id="menu-1">
17+
Menu A
18+
</button>
19+
20+
<button
21+
popovertarget="submenu-2"
22+
popovertargetaction="toggle"
23+
id="menu-2">
24+
Menu B
25+
</button>
26+
27+
<button
28+
popovertarget="submenu-3"
29+
popovertargetaction="toggle"
30+
id="menu-3">
31+
Menu C
32+
</button>
33+
</section>
34+
</div>
35+
36+
<p class="help-para">
37+
Press the buttons to show the auto popovers. Hover or focus the buttons to
38+
show the hint popovers. When an auto popover is shown, you can show the
39+
hint popovers without hiding it. See
40+
<a
41+
href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using#using_hint_popover_state"
42+
>Using "hint" popover state</a
43+
>
44+
for more information. Note that in non-supporting browsers, the position
45+
of the popovers is broken.
46+
</p>
47+
48+
<div id="submenu-1" popover="auto">
49+
<button>Option A</button><br /><button>Option B</button>
50+
</div>
51+
<div id="submenu-2" popover="auto">
52+
<button>Option A</button><br /><button>Option B</button>
53+
</div>
54+
<div id="submenu-3" popover="auto">
55+
<button>Option A</button><br /><button>Option B</button>
56+
</div>
57+
58+
<div id="tooltip-1" class="tooltip" popover="hint">Tooltip A</div>
59+
<div id="tooltip-2" class="tooltip" popover="hint">Tooltip B</div>
60+
<div id="tooltip-3" class="tooltip" popover="hint">Tooltip C</div>
61+
</body>
62+
</html>

‎popover-api/popover-hint/index.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
const tooltips = document.querySelectorAll(".tooltip");
2+
const btns = document.querySelectorAll("#button-bar button");
3+
4+
function addEventListeners(i) {
5+
btns[i].addEventListener("mouseover", () => {
6+
tooltips[i].showPopover({ source: btns[i] });
7+
});
8+
9+
btns[i].addEventListener("mouseout", () => {
10+
tooltips[i].hidePopover();
11+
});
12+
13+
btns[i].addEventListener("focus", () => {
14+
tooltips[i].showPopover({ source: btns[i] });
15+
});
16+
17+
btns[i].addEventListener("blur", () => {
18+
tooltips[i].hidePopover();
19+
});
20+
}
21+
22+
for (let i = 0; i < btns.length; i++) {
23+
addEventListeners(i);
24+
}

0 commit comments

Comments
 (0)