Andrew's Blfog

A cool trick I learned when starting work on my blog is that you can do tooltips entirely with CSS and attributes inside your HTML.

For the uninitiated, when I write "tooltip" I mean the little black dialog box that provides additional information about something on hover. For example, the "discord" and "twitter" buttons on this website use tooltips.

[Image: A "tooltip" in action.]

Typically, these are done in Javascript. However, thanks to the CSS attr() function and wide support for psuedo-elements (::before and specifically) you can fairly trivially do it all with clever CSS.

read more