A unique approach to tooltips

I've been working on a side project called Internote. Internote is a distraction-free web-based text editor with a focus on effortless design and slick user experience.

I've been fortunate that Internote is a side project where I have complete control over the featureset, design, user experience and codebase. It means that I'm free to experiment with technology and design that I am not usually tasked with such as serverless, devops and ... tooltips.


Since Internote is a distraction-free editor, clear iconography is really important as iconography is able to communicate an idea using much precious screen real-estate than text does.

Many of Internote's icons double up as buttons. For example, in Internote's header there are buttons for full-screen mode, creating new notes and accessing settings. Whilst the icons do a pretty decent job of explaining the intention behind the action, I couldn't help but feel that they could be clearer.

Whenever I use an app that utilises iconography for initiating actions, such as Google's suite of apps, I often hover over over an icon that I think is the right tool for my current task, and I wait for a little tooltip to appear to confirm I'm on the right track because I don't want to click something that isn't what I want and be forced to go backwards to get to where I was. In usability heuristics, this is known as recognition rather than recall.

I have a dilemma though because I despise tooltips that pop underneath, to the left, right or top as they feel particularly jarring. I felt inspired to try something new:

I decided to combine two UI components in to one with an interaction that morphs between them. In it's inactive state, the icon does quite a good job of saying I might be the thing you need, upon becoming active via a hover, the icon expands in to a button and reveals a tooltip that clearly states the intention of the button.

I've been having a lot of fun exploring unique UI/UX design with Internote, and I'll be blogging about features and improvements I make regularly.

Thanks for reading!