Tooltips

We don’t NEED JavaScript to adjust tooltip timing displays. Super modern CSS and HTML has this covered simply, and we can do fully successful fallbacks.

Thinking about UX, a slight delay on a simple tooltip can be nice so that mousing over something quickly doesn’t trigger it, but if there are related tooltips nearby, maybe we don’t need to wait.

With our foundation in positioning and flipping tooltips with anchors, and making pointer tails, we’re going to get extra tricky and point them diagonally.

Tooltips are a natural fit for the abilities of Anchor Positioning, which can help place them on *any* side or corner. It does make dealing with the pointer extra tricky though.

The Anchor Positioning API in CSS is very powerful. This is the beginning of a series where we understand it through the perfect use-case: tooltips.