rustdoc: add interaction delays for tooltip popovers

Designing a good hover microinteraction is a matter of guessing
user intent from what are, literally, vague gestures. In this case,
guessing if hovering in our out of the tooltip base is intentional
or not.

To figure this out, a few different techniques are used:

* When the mouse pointer enters a tooltip anchor point, its hitbox
  is grown on the bottom, where the popover is/will appear. This was
  already there before this commit: search "hover tunnel" in
  rustdoc.css for the implementation.

* This commit adds a delay when the mouse pointer enters the base
  anchor, in case the mouse pointer was just passing through and the
  user didn't want to open it.

* This commit also adds a delay when the mouse pointer exits the
  tooltip's base anchor or its popover, before hiding it.

* A fade-out animation is layered onto the pointer exit delay to
  immediately inform the user that they successfully dismissed the
  popover, while still providing a way for them to cancel it if
  it was a mistake and they still wanted to interact with it.

* No animation is used for revealing it, because we don't want
  people to try to interact with an element while it's in the
  middle of fading in: either they're allowed to interact with
  it while it's fading in, meaning it can't serve as mistake-
  proofing for opening the popover, or they can't, but they
  might try and be frustrated.

See also:

* https://www.nngroup.com/articles/timing-exposing-content/
* https://www.nngroup.com/articles/tooltip-guidelines/
* https://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown

1 files changed, 2 insertions, 0 deletions

diff --git a/tests/rustdoc-gui/codeblock-tooltip.goml b/tests/rustdoc-gui/codeblock-tooltip.goml
index e1c81ed79e4..7be5e39ba47 100644
--- a/tests/rustdoc-gui/codeblock-tooltip.goml
+++ b/tests/rustdoc-gui/codeblock-tooltip.goml
@@ -40,6 +40,7 @@ define-function: (
             "background-color": |background|,
             "border-color": |border|,
         })
+        click: ".docblock .example-wrap.compile_fail .tooltip"
 
         // should_panic block
         assert-css: (
@@ -71,6 +72,7 @@ define-function: (
             "background-color": |background|,
             "border-color": |border|,
         })
+        click: ".docblock .example-wrap.should_panic .tooltip"
 
         // ignore block
         assert-css: (