Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

hidePopover with button click not timeout #10469

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

hidePopover with button click not timeout #10469

Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
04f8e8c
hidePopover with button click not timeout
Jul 10, 2024
d69b76f
use fetch result message and reload hides popover in popover example
Jul 11, 2024
0024232
replace with tooltip w/ delayed show/hide
Jul 17, 2024
510d12a
typo
Jul 17, 2024
d2e635d
apply review
Oct 13, 2024
82b29dc
dedent
Oct 16, 2024
b1c7218
fixup for review
Nov 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 18 additions & 26 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84774,33 +84774,25 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
the user. The following demonstrates how one could reveal a popover in an <code>output</code>
element.</p>

<pre><code class="html">&lt;button id=submit>Submit&lt;/button>
&lt;p>&lt;output>&lt;span popover=manual>&lt;/span>&lt;/output>&lt;/p>

&lt;script>
const sBtn = document.getElementById("submit");
const outSpan = document.querySelector("output [popover=manual]");
let successMessage;
let errorMessage;

/* define logic for determining success of action
and determining the appropriate success or error
messages to use */

sBtn.addEventListener("click", ()=> {
if ( success ) {
outSpan.textContent = successMessage;
}
else {
outSpan.textContent = errorMessage;
}
outSpan.showPopover();
<pre><code class="html">&lt;img id="image" src="cat.js" alt="pretty kitten">
&lt;div id="tooltip" popover>
Jxck marked this conversation as resolved.
Show resolved Hide resolved
&lt;output>&lt;/output>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The previous code had the popover inside of the <output> element instead of having the popover outside of the <output>, but I'm not sure if that means anything with regards to the semantics of the <output> element.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting, but it's out of scope for here.
I'll remove it.

Jxck marked this conversation as resolved.
Show resolved Hide resolved
&lt;button popovertarget="message" popovertargetaction="hide">x&lt;/button>
&lt;/div>

setTimeout(function () {
outSpan.hidePopover();
}, 10000);
});
&lt;/script></code></pre>
&lt;script>
const $img = document.querySelector("#image")
const $tooltip = document.querySelector("#tooltip")
const $output = $tooltip.querySelector("output")

$img.addEventListener("pointerover", () => {
Jxck marked this conversation as resolved.
Show resolved Hide resolved
Jxck marked this conversation as resolved.
Show resolved Hide resolved
$output.textContent = $img.alt
$tooltip.showPopover()
})
$img.addEventListener("pointerleave", () => {
Jxck marked this conversation as resolved.
Show resolved Hide resolved
$tooltip.showPopover()
})
&lt;/script></code></pre>
</div>

<p class="note">Inserting a popover element into an <code>output</code> element will generally
Expand Down