Pop-up hints are the best and most effective way to help visitors adapt to a website’s interface. The same applies to applications, of course, but today we’re talking about websites. Hints are usually very helpful. And even if it seems users already know everything and there's no need to say that something will appear if you click here , there’s one big “ BUT ”. The fact is, we all browse websites quickly . Only when something grabs our attention do we stop and engage with the site’s interface. So, during a quick scan, it’s easy to miss things around. That’s why a suddenly appearing hint can really simplify and speed up the process of finding what you need within a project.
This isn’t just about blogs, but also company websites, cafés, online stores in particular, and more. Users get the opportunity to manage how they search for and receive information. Here’s an example: you’re looking for a type of pizza with specific ingredients. You scroll through the list and suddenly see a small message: check out the advanced search – it’s right here, kind of hidden, but it exists . The thing was, the ingredient search was collapsed, and only a general search field was visible. Whether the webmaster did a good job or not is debatable, but the idea is clear.
Compare two options: with a filter (activated by clicking the icon) and without one. People don’t order pizza every day to memorize everything. One thing is to read through the ingredients of over 50 pizza types, another – to use a filter.
Microinteraction – a dynamic process triggered by an action , which provides feedback to the user and then gives information about the next possible step. Sounds simple, but it’s not quite.
What makes a good hint? Its invisibility. It should be so subtle that the user could swear it wasn’t there. However, that also increases the risk of it being missed and the user never learning something important because the trigger didn’t activate.
In this article, we’ll take a deeper look at tooltips in web design and figure out what to avoid and what to use. And overall – do websites even need hints?
Precedents
Tooltips exist to improve UX effectiveness for a website or application. Microinteraction makes users’ lives easier to some extent. While their purpose is simple, there are still situations when it’s hard to get real help.
Unfamiliar buttons and icons
If a website uses unique and unfamiliar icons or buttons – that’s a great reason to use a tooltip. Even if the icon is familiar, a tooltip helps refresh its function within the context of this specific site. How often do we see the gear icon in the top right corner? Everyone knows it generally means settings. But it differs from project to project: account settings here, service settings there. Or look at the icon next to the gear in the second example – no tooltip, no label. So you wonder, what is that? Log out?
Information
Less important information can be hidden in a tooltip. When there’s too much on the screen or too much text, a tooltip can point out what’s where. Users shouldn’t have to memorize everything. For example, if a browser has many tabs open, hovering over one shows a small message with the page or site title. This is minor information but still useful. On websites with many pages, designers try to provide concise, informative tooltips so users don’t have to switch tabs endlessly looking for what they need.
Not an ideal solution
Tooltips can be harmful when used incorrectly. If there are too many of them, users may get tired and leave the site, possibly switching to a competitor with less info but a calmer experience.
Non-intuitive design
A non-intuitive web design is when the layout forces users to think and rely only on tooltips to figure out where to click. In such cases, even tooltips don't help because the problem lies in the design itself. The purpose of a tooltip is to adapt users to the interface, but the webmaster’s task is to ensure that “after the first lesson” users can navigate the site independently.
Links inside tooltips
Sometimes users need to dive deeper into an issue. For example, we’re comparing product descriptions or specs in an online store or on a manufacturer's site. A question mark icon opens a tooltip explaining a feature, and inside the text – a link to more details. Is it useful? For many users, yes, if they’re truly looking for answers. But webmasters often underestimate this, thinking: everyone knows how to use the internet, they’ll find it on Wikipedia.
Still, such tooltips are only effective if they don’t disappear the moment a user tries to move the cursor to click the link! Frustrating. Disappointing.
Remarkable tooltip design
So how do webmasters create the perfect tooltip to enable microinteraction and user feedback? At the very least, it requires a bit more effort – but the result is better and more productive.
Minimalism, clarity, and visibility help build a strong user interface in web design. Interestingly, this reduces confusion, but it can also make the need for tooltips seem redundant. However, by combining color, language, typography, and style, designers come up with clever solutions.
The simplest and clearest examples: Google Translate and the Wistia project . Their tooltips are visible but minimalistic, so they feel both necessary and unnecessary. Once you learn that a star icon means a phrasebook, you may never need the hint again – but a first-time or rare visitor will.
Tooltips are visible and noticeable (question marks, stars near parameters), yet unobtrusive – even on the 100th visit, they’re still there if needed. Triggering them is up to the visitor.
Clarity of information
Text in a tooltip should be simple and understandable to most users. Whether it explains a feature or field purpose – the sentences must be short and concise. Since the tooltip area is small anyway, there’s no space for long-winded explanations. That’s why embedded links in tooltip text are useful.
Let’s see how Intel does it. Most of us, when choosing a laptop or upgrading a desktop, wonder which processor to pick for better performance. It’s one thing to see a name in an online store, another – to check the manufacturer’s website. Clicking on question mark icons next to specifications brings up a full tooltip. Some are short, some longer, some with links. Note the conciseness: just two sentences are enough to understand that Intel® Hyper-Threading Technology improves multitasking performance.
Global experience
The project Sound-of-change features a feedback form that’s both intuitive and original. Clicking on each category reveals whether it’s required (marked in red). That way, users don’t waste time filling everything – just the required fields. No checkmarks, highlights, or redirects after submitting. Simple and concise.
The online store Reebok offers zoomed-in product images as tooltips. These tooltips cover price, name, and order buttons. Why? Because for this type of tooltip, product visuals are the main focus. Users will close the zoom and then place the order. If they don’t need it – they won’t trigger it.
Beautiful tooltip animation helps scroll through the long page of the project lederniergaulois.nouvelles . At first, it may seem like there’s no hint at all. But as you scroll, you notice a circle at the bottom filling up. Once it’s full – new content appears. In other words, scrolling alone doesn’t change anything until that circle is full – and it tells you just that.
Animation in tooltips and microinteractions is also appropriate. The site Sing has both horizontal navigation and animated hints using characters from the songs they sing in the movie. Users can simply hover and choose what they like.
The KLM website, while sharing interesting destinations, uses microinteractions and hints to inspire people to travel. It’s an emotional touch – you can’t argue with that. Whether the user clicks the heart or looks at the links at the bottom (not all pages have them), they receive extra info. These aren’t traditional hints, but the concept still applies. Additional tooltips might be video, audio, or photos.
Conclusions
In many ways, pop-up hints are complete and meaningful microinteraction tools . They help users achieve their goals, complete actions, and understand the interface designed by the webmaster. Depending on the style, tooltips can save users a lot of time, simplify their journey, and even encourage them to explore the site further.
However, tooltips aren’t always convenient or effective – designs must be tested and refined frequently. It’s also hard to place them correctly. You need to figure out what in your interface might confuse users or if they even need a hint there. In other words: no two users think or behave the same. One knows something, another doesn’t.
The solution is simple – understand your interface and your site. Go through the entire user journey yourself, as if you weren’t the creator. Remember the mail.ru homepage example (from the beginning of this article). A new visitor won’t notice the new feature right away – but a detailed tooltip helps a lot. Hints come in many forms.