A look at why tooltip components are often the wrong abstraction in design systems, leading to accessibility issues, misuse, and inconsistent user experiences.

TK Dodo is a platform dedicated to sharing insights and resources on software development, technology trends, and career growth. Through articles, interviews, and community engagement, TK Dodo empowers developers to navigate their career paths, stay updated with industry advancements, and cultivate  skills for personal and professional development.

TkDodo

Standalone tooltip components in design systems often lead to accessibility problems and inconsistent user experiences. The core issue is that low-level tooltip components allow developers to attach tooltips to non-interactive elements, breaking keyboard navigation and creating unpredictable UX patterns. Instead of exposing a generic Tooltip component, design systems should provide higher-level pattern components like IconButton with required titles, InfoIcon components, and InfoText elements that enforce accessible, consistent tooltip behavior by design. This restrictive approach ensures keyboard interactivity, visual discoverability, and proper accessibility labeling while preventing common misuse patterns.

Tooltip Components Should Not Exist

I agree with this article as I’m not sure I see the issue with a tooltip overall unless you either use it like a moron (a wrapper around everything?) or just overuse it period (you get a tooltip, you get a tooltip, everyone gets a tooltip!).
More specifically; not giving users a visual cue (like an info icon next to the element needing said tooltip) or a way to solidify familiarity throughout your app or site (like Sentry’s use of dotted underlined text from the article) just means someone has rather poor design sense or you just don’t know how to properly implement them?

This largely makes sense to me. I think a Tooltip that accepts children carte blanch would end up being problematic. Forcing the Tooltip component to specify a button/anchor target with relevant a11y props is the way to go.

While I agree that generic tooltip components can be problematic, I think tooltips are very useful when a button is disabled for multiple reasons. Without a tooltip, users are left guessing why they can’t proceed. In that case, the tooltip adds clarity instead of confusion.