diff --git a/html/semantics/popups/popup-hoverpopup-attribute.tentative.html b/html/semantics/popups/popup-hoverpopup-attribute.tentative.html
new file mode 100644
index 00000000000000..5c8caa4bff0ea1
--- /dev/null
+++ b/html/semantics/popups/popup-hoverpopup-attribute.tentative.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>The hoverpopup attribute</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel=help href="https://open-ui.org/components/popup.research.explainer">
+<meta name="timeout" content="long">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="resources/popup-utils.js"></script>
+
+<body>
+<style>
+  div {top:100px;}
+  [popup] {top:200px;}
+</style>
+<script>
+let nextId = 0;
+async function makePopUpAndInvoker(test, popUpType) {
+  const popUp = Object.assign(document.createElement('div'),{popUp: popUpType, id: `pop-up-${nextId++}`});
+  document.body.appendChild(popUp);
+  popUp.textContent = 'Pop-up';
+  const invoker = document.createElement('div');
+  document.body.appendChild(invoker);
+  invoker.textContent = 'Invoker';
+  invoker.setAttribute('hoverpopup',popUp.id);
+  test.add_cleanup(() => {popUp.remove();invoker.remove();});
+  await waitForRender();
+  return {popUp,invoker};
+}
+function mouseOver(element) {
+  return (new test_driver.Actions())
+    .pointerMove(0, 0, {origin: element})
+    .send();
+}
+const hoverTime = 200; // TODO(masonf): Once the hover time is CSS-customizable, lower this.
+async function waitForHoverTime() {
+  await new Promise(resolve => step_timeout(resolve,hoverTime));
+  await waitForRender();
+};
+
+["auto","hint","manual"].forEach(type => {
+  promise_test(async (t) => {
+    const {popUp,invoker} = await makePopUpAndInvoker(t,type);
+    assert_false(popUp.matches(':top-layer'));
+    await mouseOver(invoker);
+    assert_false(popUp.matches(':top-layer'));
+    await waitForHoverTime();
+    assert_true(popUp.matches(':top-layer'));
+    popUp.hidePopUp(); // Cleanup
+  },`hoverpopup attribute shows a pop-up with popup=${type}`);
+
+  promise_test(async (t) => {
+    const {popUp,invoker} = await makePopUpAndInvoker(t,type);
+    popUp.showPopUp();
+    assert_true(popUp.matches(':top-layer'));
+    await mouseOver(invoker);
+    assert_true(popUp.matches(':top-layer'));
+    await waitForHoverTime();
+    assert_true(popUp.matches(':top-layer'));
+    popUp.hidePopUp(); // Cleanup
+  },`hoverpopup attribute does nothing when pop-up is already showing (popup=${type})`);
+
+  promise_test(async (t) => {
+    const {popUp,invoker} = await makePopUpAndInvoker(t,type);
+    await mouseOver(invoker);
+    assert_false(popUp.matches(':top-layer'));
+    popUp.remove();
+    await waitForHoverTime();
+    assert_false(popUp.matches(':top-layer'));
+    // Now put it back in the document and make sure it doesn't trigger.
+    document.body.appendChild(popUp);
+    await waitForHoverTime();
+    assert_false(popUp.matches(':top-layer'));
+  },`hoverpopup attribute does nothing when pop-up is moved out of the document (popup=${type})`);
+
+  promise_test(async (t) => {
+    const {popUp,invoker} = await makePopUpAndInvoker(t,type);
+    const {popUp: popUp2, invoker: deleteMe} = await makePopUpAndInvoker(t,type);
+    deleteMe.remove();
+    await mouseOver(invoker);
+    assert_false(popUp.matches(':top-layer'));
+    assert_false(popUp2.matches(':top-layer'));
+    invoker.setAttribute('hoverpopup',popUp2.id); // Reassign
+    await waitForHoverTime();
+    assert_false(popUp.matches(':top-layer'));
+    assert_false(popUp2.matches(':top-layer'));
+  },`hoverpopup attribute does nothing when target changes (popup=${type})`);
+});
+</script>
