Menu

Post image 1
Post image 2
1 / 2
0

Building inline tooltips that match every site's typography

DEV Community·J Now·about 1 month ago
#04w234nE
#css#frontend#ui#webdev#host#font
Reading 0:00
15s threshold

When I built rabbitholes — a Chrome extension that explains any highlighted text inline — the hardest UI problem wasn't the explanation quality. It was making the tooltip look like it belonged on the page you were reading. A Substack article, a Wikipedia entry, and a GitHub README all use different fonts. A tooltip that renders in a hardcoded sans-serif looks foreign on a serif publication and just wrong on a monospace docs site. The fix sounds simple: inherit the host font. The implementation choice makes it complicated. I tried an iframe first. Iframes are the conventional choice for extension overlays because they give you full style isolation — host CSS can't touch anything inside. But isolation cuts both ways. An iframe is a separate document with no access to the host page's font loading state.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More