iOS only detects mouseleave when background element's CSS is set to cursor: pointer

Question

I have a tooltip which uses 2 event listeners: mouseenter (to open it) and mouseleave (to close it).

In desktop browsers and iPhone iOS 13.2 it works fine, however it wasn't closing for iPhone iOS 12.2.

I found a solution, setting the CSS cursor: pointer; on the background element. So it would seem iOS needs a bit of help detecting the mouseleave event.

Is there another solution? Settings cursor: pointer; feels hacky and could be confusing in some circumstances.

UPDATE: I added the following code to simplify my test and as I expected 'testing' is logged when I tap the screen for iOS13 but not iOS12. However when I put that code (and nothing else) into codepen.io and view it that way then both versions work fine.

function doTest() {
  console.log('testing');
}

document.addEventListener('click', doTest);

score 1 · Accepted Answer · answered Dec 03 '19 at 00:04

Apparently any non-anchor elements on iOS can not receive "mouse" events without cursor: pointer; See: https://stackoverflow.com/a/27938334/529024.

So I suggest to try either changing your element to anchor <a> or use touch events: touchstart and touchend. See: https://stackoverflow.com/a/20882736/529024

score 0 · Answer 2 · answered Dec 08 '19 at 03:05

touchend events will only run on mobile devices. Add a touchend to the document to hide the tooltips whenever the body is tapped, but block that from happening when the element you want to show the tooltip is tapped- and show the tooltip ontouchend instead. I made a simple example for you for clarification. It just demonstrates this concept with a single tooltip which has an id of "tooltip":

document.addEventListener("touchend", function(){
  hideTooltip();
});

function showTooltip(){
  document.getElementById("tooltip").style.display = "block";
}

function hideTooltip(){
  document.getElementById("tooltip").style.display = "none";
}

body>div{
  width:100px;
  height:100px;
  background:red;
  position:relative;
}
  
#tooltip{
  position:absolute;
  top:100%;
  left:0px;
  width:100%;
  background:#222;
  color:#fff;
  padding:5px;
  box-sizing:border-box;
  display:none;
}

<html>
 <body>
  <div onmouseenter="showTooltip();" onmouseleave="hideTooltip();" ontouchend="event.preventDefault();showTooltip();">
   Tap me!
   <div id="tooltip">tooltip info...</div>
  </div>
 </body>
</html>

iOS only detects mouseleave when background element's CSS is set to cursor: pointer

2 Answers2