I’ve been thinking a lot about floating elements lately. In my article about building a tooltip, I used
floating-ui for dynamically anchoring the tooltip near its trigger. This library handles a lot of edge cases, one of which is the use of a “safe polygon” to improve the experience of elusive hover menus.
Video alt: Hovering an item within a menu opens a sub-menu. The pointer can be safely moved from the menu-item into the sub-menu as long as it stays within an invisible triangle formed between the original menu-item and the corners of the sub-menu.
I was intrigued by this technique and decided to dig into its history, purely from an academic perspective if anything.
Turns out it goes by many names: hover triangle, amazon triangle, hover tunnel, extended mouse corridoor, or just broadly grouped under the topic of hover intent.
1986: Bruce Tognazzini, Apple
The earliest reference I could find was Bruce “Tog” Tognazzini who worked with Jim Batson to invent this technique at Apple’s HID team.
I find it absolutely wild that developers were already solving these UX problems before the web was even a thing. Almost 40 years later, we are still solving the same problems.
Addendum (brought to my attention by Chris Coleman): In 1999, John Siracusa from Ars Technica discovered that it was removed in mac OS X, making the user experience objectively worse. Even today, macOS uses a short delay instead of the triangle.
The next reference I could find was Amazon using this technique in their megamenu. This might just be the first time it was used on the web, replacing the common workaround of using a delay.
I couldn’t find any more info on this, except that @Nycto was on the team that built this.
2013: Ben Kamens, Khan Academy
Ben Kamens wrote an incredibly popular blog post dissecting Amazon’s triangle technique and recreating it with the help of Sophie Alpert at Khan Academy.
It was probably Ben’s blog post that popularized the technique in the first place, and digging through its comments is actually how I was able to find most of the above information mentioned so far.
Judging by the theme of this article, Ben was onto something when they said “I’m sure this problem was solved years and years ago, forgotten, rediscovered, solved again, forgotten, rediscovered, solved again.” 😁
2015: CSS-tricks article
Chris Coyier wrote a CSS-tricks article mentioning Ben Kamen’s post and also going over some other approaches for solving this UX problem. This article generated a lot of responses, with many developers sharing how they have attempted to solve it themselves.
2019: Hakim, Slides
Hakim El Hattab gave an excellent talk at CSS Day 2019, going over many of the little UX details they paid attention to when working on Slides. In this talk, Hakim shows off a more refined, curved version of the triangle, built using SVG exit paths. The curves are helpful to avoid covering up any interactive elements that may be directly above or below the button.
The best part: Slides’ component kitchen sink is publicly accessible, complete with a “debug view” which lets you play around and visualize the SVG ovelay.
And that brings us to present day, where we get to see a version of this triangle implemented in various libraries. In addition to
floating-ui, I’ve seen it in at least
ariakit. I’m sure every React developer out there building a hover menu has considered reimplementing some variation of it. 😁
Generally, I try to avoid using hover as the trigger for interactive elements such as a menu. Click menus are simply better in almost every way, so why complicate things? Most hover menus I see out in the wild are an unusable mess, and adding a triangle is not going to fix its other usability and accessibility problems. (It’s also not 1986 anymore; the majority of the world navigates the web on touch devices now.)
Is any of this information useful? Was this a productive use of my evening? I’m not sure. But it’s definitely a cool trick that I’ll always be on the lookout for whenever I encounter a hover menu.