I have a "more details" pane that opens up when a user either hovers a mouse over a tooltip, or clicks the tooltip with a touchscreen. This is simply achieved via

tooltip.addEventListener('mouseenter', showPane);

I was surprised how easy this was, with mouseenter seeming to work perfectly for mouse hover or touchscreen tap.

At the moment it's closed with

tooltip.addEventListener('mouseleave', hidePane);
tooltip.addEventListener('click', hidePane);

I.e. any screen tap or mouse click, or mousing away (if user has a mouse) from the tooltip icon will close the pane.

This may be an XY problem. What I want is to have a prompt for the user to access MORE more details. So in the "more details" popup pane, I have a line "press [1] to see more" (1 styled like a keyboard key). Unless they have a touchscreen, and a small enough screen, in which case I assume they have no physical keyboard/mouse and ask them to "Click here to see more" instead.

(I know this isn't perfect, but I can't think of a better way to achieve it. I could make mouse users have to click the tooltip instead, so the experience was the same for mobile/PC/whatever, styling it with a pointer cursor, but I prefer it to work on hover.)

It all works perfectly, except for the "click here to see more" link, which just closes the tooltip instead. I don't know how to exclude those clicks from both of the hidePane event handlers. Any help appreciated, thank you!