Hover triangles

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.

macOS nested menubar showing two paths for pointers: one that goes directly from the original menu item to the destination item in the submenu in a diagonal line, and one that goes horizontally into the submenu and then vertically to the destination inside the submenu

2000s: Amazon

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.

A triangle area highlighted within a mega-dropdown menu on Amazon.com

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.

The amazon triangle technique, now deployed to 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.

Present day

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 radix-ui and ariakit. I’m sure every React developer out there building a hover menu has considered reimplementing some variation of it. 😁

In closing

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.