Cannot hover over the content of a hover tooltip when the arrow option is set

[andy0130tw]

Describe the issue

I am trying out the hover tooltip provided in @codemirror/view. While I was trying the arrow option, I noticed that a hover tooltip could not be hovered over reliably. In the example about hover tooltips, it is mentioned that the user should be able to interact with the tooltip, so I consider this an issue.

This is the the tooltip without an arrow (a yellow mark is added to indicate the hover region):

And this is the tooltip with one to demonstrate the issue:

2024-08-12.1.44.04.mov

This issue does not occur when arrow is not set, and neither when the tooltip range covers the next/previous line, depending on which side the tooltip is placed at. My guessing is that the arrow shifts the tooltip vertically and leaves a ~7-pixel gap. As a result, when the mouse moves slowly enough, another mouseover event triggers a tooltip request and hides the current tooltip.

My proposal to fix is filling up the gap, perhaps by wrapping around the arrow with another element and ignore the mouseover event there, as if it is an extended region of .cm-tooltip.

This solution has a bonus on styling that the entire tooltip element can be set to scrollable when the size is constrained without affecting the arrow. But this part is only my unsolicited suggestion.

Browser and platform

Firefox v129 on macOS

Reproduction link

https://codemirror.net/try/?c=aW1wb3J0IHtiYXNpY1NldHVwLCBFZGl0b3JWaWV3fSBmcm9tICdjb2RlbWlycm9yJwppbXBvcnQge2hvdmVyVG9vbHRpcH0gZnJvbSAnQGNvZGVtaXJyb3IvdmlldycKCmZ1bmN0aW9uIGhvdmVyVG9vbHRpcFByb3ZpZGVyKHZpZXcsIHBvcywgc2lkZSkgewogIHJldHVybiBbewogICAgcG9zOiAwLAogICAgZW5kOiA1LCAgLy8gY292ZXIgb25seSBhIHdvcmQKICAgIGNyZWF0ZSh2aWV3KSB7CiAgICAgIGNvbnN0IGRpdiA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2RpdicpCiAgICAgIGRpdi5pbm5lckhUTUwgPSAnc29tZSBzYW1wbGUgdGV4dCcKICAgICAgcmV0dXJuIHtkb206IGRpdn0KICAgIH0sCiAgICBhcnJvdzogdHJ1ZSwgIC8vIHRvZ2dsZSB0aGlzIGxpbmUhCiAgfV0KfQoKbmV3IEVkaXRvclZpZXcoewogIGRvYzogJ2hvdmVyIG92ZXIgbWUnLAogIGV4dGVuc2lvbnM6IFsKICAgIGJhc2ljU2V0dXAsCiAgICBob3ZlclRvb2x0aXAoaG92ZXJUb29sdGlwUHJvdmlkZXIpLAogIF0sCiAgcGFyZW50OiBkb2N1bWVudC5ib2R5Cn0pCg==

[marijnh]

Attached patch handles this in a minimally invasive way by including the arrow's vertical extent in the box that the mouse position is compared against. Does that work for you?

[andy0130tw]

Yes, that works like a charm. Thanks.