<body>
<style>
.item {
width: 100px;
height: 100px;
}
.tooltip {
visibility: hidden;
z-index: 10;
}
</style>
<div
class="item"
data-url="
https://a.com"
style="background-color:
red"></div>
<div
class="item"
data-url="
https://b.com"
style="background-color:
green"></div>
<div
class="item"
data-url="
https://c.com"
style="background-color:
blue"></div>
<div class="tooltip">Hello World!</div>
<p>the change in <code>visibility</code> of the <code>.tooltip</code> should require a second tap before the <code>"click"</code> (which opens the new tab) is dispatched</p>
<p>PASS if tapping on any of the squares above does NOT open a new tab on iOS</p>
<script>
let tooltip = document.querySelector(".tooltip");
document.querySelectorAll(".item").forEach((node) => {
function handleMousemove(event) {
tooltip.style.visibility = "visible";
tooltip.style.pointerEvents = "none";
node.removeEventListener("mousemove", handleMousemove);
}
node.addEventListener("mousemove", handleMousemove);
node.addEventListener("mouseleave", (event) => {
tooltip.style.visibility = "hidden";
node.addEventListener("mousemove", handleMousemove);
});
node.addEventListener("click", (event) => {
window.open(node.dataset.url, "_blank");
});
});
</script>