Helping users with CSS tooltips
Sometimes, it's just not possible to make a wholly intuitive user interface. Often you need to gently nudge your user along the right path in a manner that is polite and helpful rather than forceful and condescending.
Last week, there was a prime example of this. We heard from a user that they didn't understand what the 'Time of year' dropdown over on Gadabouting did. Of course, we know what it does. It shows the user photos that were taken in a particular month, allowing them to see at a glance the best places to go at that time. But they had no idea because it hadn't been explained to them.
Clearly, there was a disconnect here that needed to be fixed. So we quickly developed a simple CSS tooltip to explain it. When you hover over it, a speech bubble fades in and up to tell you some more. Moreover, there's a nice triangle (drawn in CSS too) to pinpoint exactly what the tooltip relates to. You can see it live on Gadabouting.
The code used is below. Hover over the 'Time of year' button to see the tooltip in action, and I hope you find it useful for your own projects.
See the Pen Tooltip hover with CSS triangles by Dominic Eden (@dominiceden) on CodePen.
