Tooltips feel like the smallest UI problem you can have. They’re tiny and usually hidden. When someone asks how to build one, the traditional answer almost always comes back using some JavaScript library. And for a long time, that was the sensible advice.

I followed it, too.

On the surface, a tooltip is simple. Hover or focus on an element, show a little box with some text, then hide it when the user moves away. But once you ship one to real users, the edges start to show. Keyboard users Tab into the trigger, but never see the tooltip. Screen readers announce it twice, or not at all. The tooltip flickers when you move the mouse too quickly. It overlaps content on smaller screens. Pressing Esc does not close it. Focus gets lost.

Over time, my tooltip code grew into something I didn’t really want to own anymore. Event listeners piled up. Hover and focus had to be handled separately. Outside clicks needed special cases. ARIA attributes had to be kept in sync by hand. Every small fix added another layer of logic.

Libraries helped, but they were also more like black boxes I worked around instead of fully understanding what was happening behind the scenes.

That was what pushed me to look at the newer Popover API. I wanted to see what would happen if I rebuilt a single tooltip using the browser’s native model without the aid of a library.

As we start, it’s worth noting that, as with any new feature, there are some things with it that are still being ironed out. That said, it currently enjoys great browser support, although there are several pieces to the overall API that are in flux. It’s worth keeping an eye on Caniuse in the meantime.

Before the Popover API, using a tooltip library was not a shortcut. It was the default. Browsers didn’t have a native concept of a tooltip that worked across mouse, keyboard, and assistive technology. If you cared about correctness, your only option was to use a library, and that is exactly what I did.

At a high level, the pattern was always the same: a trigger element, a hidden tooltip element, and JavaScript to coordinate the two.

<button class="info">?</button>
<div class="tooltip" role="tooltip">Helpful text</div>

The library handled the wiring that allowed the element to show on hover or focus, hide on blur or mouse leave, and reposition/resize on scroll.

Over time, the tooltip could become fragile. Small changes carried risk. Minor fixes caused regressions. Worse, adding new tooltips inherited the same complexity. Things technically worked, but never felt settled or complete.

That was the state of things when I decided to rebuild the tooltip using the browser’s native Popover API.

I didn’t switch to using the Popover API because I wanted to experiment with something new. I switched because I was tired of maintaining tooltip behavior that I believed the browser should have already understood.

I was skeptical at first. Most new web APIs promise simplicity, but still require glue, edge-case handling, or fallback logic that quietly recreates the same complexity that you were trying to escape.

So, I tried the Popover API in the smallest way possible. Here’s what that looked like:

<!-- popovertarget creates the connection to id="tip-1" -->
<button popovertarget="tip-1">?</button>

<!-- popover="manual": browser manages this as a popover -->
<!-- role="tooltip": tells assistive technology what this is -->
<div id="tip-1" popover="manual" role="tooltip">
  This button triggers a helpful tip.
</div>

1. The Keyboard “Just Works”

Keyboard support depended on multiple layers lining up correctly: focus had to trigger the tooltip, blur had to hide it, Esc had to be wired manually, and timing mattered. If you missed one edge case, the tooltip would either stay open too long or disappear before it could be read.

With the popover attribute set to auto or manual, the browser takes over the basics: Tab and Shift+Tab behave normally, Esc closes the tooltip every time, and no extra listeners are required.

<div popover="manual">
  Helpful explanation
</div>

What disappeared from my codebase were global keydown handlers, Esc-specific cleanup logic, and state checks during keyboard navigation. The keyboard experience stopped being something I had to maintain, and it became a browser guarantee.

2. Screenreader Predictability

This was the biggest improvement. Even with careful ARIA work, the behavior varied, as I outlined earlier. Every small change felt risky. Using a popover with a proper role looks and feels a lot more stable and predictable as far as what’s going to happen:

<div popover="manual" role="tooltip">
  Helpful explanation
</div>

And here’s another win: After the switch, Lighthouse stopped flagging incorrect ARIA state warnings for the interaction, largely because there are no longer custom ARIA states for me to accidentally get wrong.

3. Focus Management

Focus used to be fragile. Before, I had rules like: let focus trigger show tooltip, move focus into tooltip and don’t close, blur trigger when it’s too close, and close tooltip and restore focus manually. This worked until it didn’t.

With the Popover API, the browser enforces a simpler model where focus can more naturally move into the popover. Closing the popover returns focus to the trigger, and there are no invisible focus traps or lost focus moments. And I didn’t add focus restoration code; I removed it.

The Popover API means that tooltips are no longer something you simulate. They’re something the browser understands. Opening, closing, keyboard behavior, Escape handling, and a big chunk of accessibility now come from the platform itself, not from ad-hoc JavaScript.

That does not mean tooltip libraries are obsolete because they still make sense for complex design systems, heavy customization, or legacy constraints, but the default has shifted. For the first time, the simplest tooltip can also be the most correct one. If you are curious, try this experiment: Simply replace just one tooltip in your product with the Popover API, do not rewrite everything, do not migrate a whole system, and just pick one and see what disappears from your code.

When the platform gives you a better primitive, the win is not just fewer lines of JavaScript, but it is fewer things you have to worry about at all.

Check out the full source code in my GitHub repo.

Further Reading

For deeper dives into popovers and related APIs:

• “Poppin’ In”, Geoff Graham
• “Clarifying the Relationship Between Popovers and Dialogs”, Zell Liew
• “What is popover=hint?”, Una Kravets
• “Invoker Commands”, Daniel Schwarz
• “Creating an Auto-Closing Notification with an HTML Popover”, Preethi
• Open UI Popover API Explainer
• “Pop(over) the Balloons”, John Rhea
• “CSS Anchor Positioning”, Juan Diego Rodríguez

MDN also offers comprehensive technical documentation for the Popover API.

I’m currently looking for a job, so I have some free time. I decided to use it to work on the look and feel of this website some more, adding small design touches for a nicer, more accessible reading experience. I’ll share the highlights in this article!

• Working theme switcher
• Fluid typography
• Creative embeds
• Heading anchors
• Fleurons
• Squircle corners
• Clearer focus styles
• Better ad placement
• Wrapping up

Working theme switcher

There were a few minor issues with the theme switcher (in the corner of your screen).

• For starters, it didn’t work when the operating system was set to dark mode. The website would be correctly rendered in dark mode, but the theme switcher would simply not work.
• Also Giscus (my comment system) wouldn’t adapt to the theme, so you’d have a bright section when using dark mode.

I’ve reworked theme-related code a lot. On the CSS side, I’ve leveraged the color-scheme property, and started using the light-dark(..) function pretty much all over the place.

:root {
  color-scheme: light dark;
}

body {
  color: light-dark(#444, #eee);
  background-color: light-dark(#fff, #222);
}

I’ve improved the control itself to be a tri-state button to support dark, light and automatic modes. I wasn’t super sure what would be the best markup for this, so I decided to leverage the mixed state from aria-pressed.

<!-- Button currently in light mode -->
<button
  type="button"
  aria-pressed="false"
  class="ThemeButton no-print" 
  title="Theme: light"
>
  <span class="visually-hidden">Dark mode</span>
  <!-- Appropriate icon for current mode here -->
</button>

Semantically, this is a button to control the dark mode specifically (not exactly the theme per se). The aria-pressed attribute determines whether the dark mode is enabled: true for yes, false for no, mixed for automatic (according to the operating system preference).

The JavaScript code just rotates between the 3 states, and backs up the preference in the local storage of the browser. When you interact with the button, it computes the next state, updates the aria-pressed and title attributes, and stores the new value in local storage.

I’ve also added a playful little hover animation for that button, making it wiggle. Try it here:

.ThemeButton:hover {
  animation: wiggle 500ms ease-out;
}

@keyframes wiggle {
  from { transform: rotate(10deg) }
  25% { transform: rotate(-10deg) }
  50% { transform: rotate(20deg) }
  75% { transform: rotate(-5deg) }
  to { transform: rotate(0deg) }
}

Fluid typography

Fluid typography is not new. Geoff Graham, among others, was already writing about it in 2017. Somehow, I never really bothered to look into it. I always found it to be an unnecessary trick. But I decided to come back to it and actually try it out, since this seems like the right place for that.

I’m not smart enough to really make sense of the math behind it, but this declaration essentially allows for variable font size between 1.25rem and 1.4rem. CSS-Tricks has a good article about fluid typography to dive deep into the concept.

body {
  font-size: min(max(1.25rem, 4vw), 1.4rem);
}

Creative embeds

Historically, blockquotes and informative callouts were rendered exactly the same on this website. This came from a time where I used to write content in pure Markdown with no HTML access, and used the blockquote syntax (>) to create callouts. It’s of course not great for semantics, so I eventually had 2 different components, and it was time to style them differently.

Let’s see them in action:

This is a blockquote. It is meant to represent a citation — from someone or somewhere, and renders a <blockquote> element.
— Kitty Giraudel

And:

They still do look similar! They bear the same pale blue background color, and the blue to pink gradient border. Speaking of which, for some reason it does not seem to be possible to render a gradient border using border-image with rounded corners. I have resorted to using this solution from StackOverflow:

blockquote {
  --background-color: light-dark(#f3f8fc, #303132);
  padding: 0.75em 1.5em;
  background-color: var(--background-color);
  border: 2px solid transparent;
  background-image:
    linear-gradient(var(--background-color), var(--background-color)),
    linear-gradient(to right, var(--blue), var(--pink));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

It’s a very clever approach: it uses a flat gradient (with no color change) applied all the way through the padding box, and the actual gradient applied to the border box, created by a transparent border.

Now, for the floating typographic marks, I’ve used absolutely positioned pseudo-elements: a curious interrobang for callouts, and curly quotation marks for blockquotes. For instance, here is the code for the callout:

.Info::before {
  content: '‽';

  opacity: 0.2;
  font: 1000% / 1 Baskerville, serif;
  color: var(--blue);

  position: absolute;
  bottom: 100%;
  left: 0;
  z-index: 1;

  transform: translate(-10%, 69%) rotate(-30deg);
}

It’s worth pointing out that the transform value for the pseudo-element is totally arbitrary. I just played with the values until I reached something I was happy with. It would need different values for a different font family or size.

To ensure the content within the callout sits on top of the decorative character (even though the latter is semi-transparent), we bump its z-index:

.Info > * { position: relative; z-index: 2; }

I have used the same design pattern for footnotes, and the editorial changes for an example). I really like the juxtaposition of a neatly bordered box, and a decorative element breaking out of it, bringing some dynamism!

Heading anchors

I have had a love-hate relationship with heading anchors over the years. I’ve had them, removed them, had them again, removed them again. Well guess what? They’re back! I was seduced by Zach Leat’s elegant heading-anchors web component. It’s very light, accessible, and easy to use.

<heading-anchors selector="h2,h3,h4" content="§">
  <!-- Page content -->
</heading-anchors>

Fleurons

I am fascinated by obscure typographic features. One of my recent reads is Shady Characters by Keith Houston — a fabulous walk through a dozen or so typographic characters, such as &, and #, and †.

The other day, I stumbled upon this delightful website by Henry Desroches. Just before the footer stands this gorgeous little guy: ❦. Would you just look at it? It turns out that it has a name: the fleuron. Quoting Wikipedia:

A fleuron (/ˈflʊərɒn, -ən, ˈflɜːrɒn, -ən/), also known as a printers’ flower, is a typographical symbol, or glyph, used either as a punctuation mark or as an ornament for typographic compositions. Fleurons are stylized forms of flowers or leaves; the term derives from the Old French: floron (“flower”). Robert Bringhurst in The Elements of Typographic Style calls the forms “horticultural dingbats”. A commonly encountered fleuron is the ❦, the floral heart or hedera (ivy leaf), also known as an aldus leaf after Italian Renaissance printer Aldus Manutius.

I couldn’t resist inserting this “horticultural dingbat” in a few places, least of all between the post date and the expected reading time in the header of the article layout. Another tiny flourish that makes the layout feel more considered.

February 26th, 2026 ❦ 6–minute read

Squircle corners

I have recently (re)discovered squircle corners, and the fact that they are getting native support in CSS via the corner-shape property.

.box {
  border-radius: 1em;
  corner-shape: squircle;
}

I’ve switched most boxes to use squircle corners because I find them more aesthetically pleasing. So code blocks, blockquotes, callouts, outlines and more now use this new shape (provided your browser supports it).

Clearer focus styles

I’ve had these gradient links for a long time now. And I still like them a lot, but the effect can be quite subtle, especially on low resolution screens. So I’ve decided to make the focus styles more obvious by adding a proper pink outline:

a:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 2px;
  border-radius: 0.25em;
  corner-shape: squircle;
}

Speaking of links, I’ve also added a little bit of spacing at the top of the page when linking to a heading so that it doesn’t lick the top of the window.

h2 {
  scroll-margin-top: 0.5rem;
}

Better ad placement

For some reason, I am still running ads on this website. It’s not like I make a lot of money from it though. I’ve been with CarbonAds for over 10 years, and probably haven’t made more than a few hundred bucks from them in all that time. But still, it pays for the occasional cup of coffee, so it’s kind of nice I guess.

Carbon requires the ad (which is ~330 × 114px) to be placed above the fold — for obvious reasons. I didn’t really know what to do with it, so I had placed it right below the title, centered. It didn’t look too great. Even worse, when running an ad-blocker (something I obviously also do), there would be this massive blank space under the page title for where the ad was supposed to show up. It would look awkward.

I had limited that problem a little by placing the ad in the bottom right corner of the screen for large viewports. But that wouldn’t happen before 1556-pixel-wide viewports.

So I’ve implemented a few changes. First, I’ve moved the ad a little lower in the page, while still living above the fold. When possible, I injected it after the first paragraph. This wasn’t too obvious in Liquid:

{​% assign parts = content | split: "</p>" %}
{​{ parts | first }}</p>

{​% include "ad.html" %}

{​% for part in parts offset: 1 %}
  {​{ part }}{​% unless forloop.last %}</p>{​% endunless %}
{​% endfor %}

And for it to fit better within the flow of the article, I’ve wrapped the ad in a visible container, with a dedicated slot and some text to explicitly mention that this callout is for an ad display.

Finally, I’ve made it so that if the ad couldn’t be loaded (because of an ad-blocker or any other reason), the ad container would be hidden entirely:

.Ad:not(:has(#carbonads)) { display: none }

@media screen and (min-width: 1556px) {
  .Ad          { display: contents }
  .Ad__text    { display: none }
  .Ad__carbon  { position: fixed; bottom: 0.5em; right: 1em }
}

Wrapping up

I think I covered the most important things! I’ve also cleaned up a lot of the code, particularly on the CSS side, but it’s not particularly interesting. Overall, I’m very happy with the design, and it’s been very fulfilling getting to work on it calmly and peacefully. I hope you like it!

And more patience.

In game development, it’s common to use spritesheets for animation, but this technique isn’t as widely used on the web. Which is a shame, because we can do some pretty cool stuff with sprites! In this post, we’ll share the niche CSS function you can use to leverage this technique, and explore some of the potential use cases.

The quality of free plugins just keeps getting better. These are the best free plugins for 2026.

We really are spoiled for choice. Not only are paid plugins better than ever, with analog-style instruments sounding more realistic every year, and hardware emulations of classic gear making in-the-box production that much more professional-sounding, we’re also blessed with a plethora of free ones. It’s a veritable VST smorgasbord out there. So much so, in fact, that it can be hard to know what’s worth downloading and what’s not. 

Here’s a list, then, of what you need to have in your AU and VST folders. These are the best free plugins for 2026 presented in no specific order. Instruments and effects, they’re all here. And all free.

Vital Audio Vital

Of course, we have to start this list with Vital from Vital Audio, aka Matt Tytel. Although it’s not the new kid on the block anymore, Vital remains a (wait for it) vital wavetable synth to rival the big dogs like Serum and Pigments. And while there are paid variants, the free version is just as good, complete with morphing wavetables, stereo modulation, keytracking LFOs, MPE and all the other good stuff. You just don’t get as many wavetables and presets as in the paid versions.

There’s a reason we listed it as one of the ten best wavetable soft synths you’re not using.

Find out more on the Vital website.

Surge Team OB-Xf

You’re probably familiar with Surge, the freeware super synth maintained by a team of dedicated coders. While it certainly could sit comfortably on a list of the best plugins of 2026, we’ve decided to give its seat instead to OB-Xf, an emulation of the Oberheim OB-X built by the same Surge Team.

If OB-Xf sounds familiar, that’s because it started from the same code as OB-Xd, the classic freeware synth now stewarded by discoDSP. discoDSP has made the (rather unpopular) decision to charge for OB-Xd, so now Surge Team has forked the original code and continued development. It’s currently in beta, so downloader beware, but it sounds great and will tick all those Obie boxes for you.

And if you’re in need of a new freeware sampler, check out the just-announced Shortcircuit-XT from the same people.

Find out more on the Surge Team GitHub.

Valhalla Supermassive

When it comes to algorithmic software reverbs, you can’t beat Valhalla. Sure, there are better — but they’re also more expensive. Valhalla only charges $50 for its effects plugins. But free is even better than cheap, and that’s what Supermassive is.

Supermassive is (as the name suggests) best for huge reverbs. You know, the kind that YouTube synthfluencers drown their demos in to make themselves sound better. Or you can use it to turn any sound into a pad. It’s also got a delay circuit that specializes in huge feedback washes. 

And Valhalla keeps updating it. There are now a whopping 22 modes of reverb/delay to play with. Massively essential.

Find out more on the Valhalla website.

TDR Nova

Dynamic EQ isn’t the rare beast that it once was. Nova from Tokyo Dawn Records (that’s TDR to you and me) used to be one of the few available EQs with dynamics built in. Although that’s changed, Nova is still very much worth the download, chiefly because it’s so darned easy to use. Even if you’ve never tried a dynamic EQ, you’ll be ducking frequency bands to the sidechain input in no time at all.

Although the four bands you get in the gratis version will probably be enough to work with, you can level up to the paid Gentlemen’s Edition (€60) for two more nodes and other additional functionality. 

Download Nova from the Tokyo Dawn Records site.

Xfer Records OTT

Xfer Records is best known as the developer of the world-beating Serum, which has had such an outsized influence on electronic music it’s not even funny. Serum isn’t the team’s only product, though. Along with paid plugins like the excellent LFO Tool, there’s also OTT, which may rival Serum in terms of appearances on tracks. (It’s so common, even FabFilter has aped it in its recent Pro-C 3.)

A multiband compressor, OTT uses simultaneous downward and upward compression across three bands to generate monstrous results. It’s not called Over The Top for nothing.

Get OTT from the Xfer Records website.

Caelum Audio Flux Mini 2

A good LFO tool is indispensable. While there are plenty available that are capable of all kinds of craziness, if you just need something to handle basic volume ducking duties and the occasional filter wobble and don’t feel like laying out any cash, Flux Mini 2 from Caelum Audio fits the bill perfectly.

Based on the bigger and more powerful Flux Pro, Flux Mini 2 lets you draw in LFO curves to affect filter cutoff (low-, high- or bandpass), filter resonance, and mix, but the one you’ll probably use the most is amplitude for sidechain-style volume modulation. Plus, it can send MIDI CCs to control other plugins.

Find out more at the Caelum Audio site.

Splice Instrument

Spitfire Audio’s LABS was a fantastic, free and ever-growing plugin packed full of unique and very usable Spitfire sampled instruments. And then it went paid (as LABS+). Now, thanks to Splice owning Spitfire, it’s back again in the form of Instrument, a freemium plugin with a free tier that revives LABS and adds new monthly instruments. (If you want more, you can upgrade to one of two paid levels with access to exclusive content and credits to use across Splice.)

How much you want to engage with the Splice ecosystem is up to you, but the free content in Instrument is nothing short of fantastic. This is Spitfire we’re talking about, after all, with sounds that include a piano recorded at Philip Glass’ home, drum performances by session musician Abe Laboriel Jr., and the BBC Symphony Orchestra captured at Maida Vale Studios.

Find out more.

Dawesome Zyklop

Two years ago, we called Zyklop from Dawesome one of the best secret sauce plugins of 2024. It certainly still is that, and it’s also one of the best free plugins for 2026. 

Based on the bigger Myth instrument, Zyklop uses resynthesis to transform any sound you throw at it into a complex waveform that you can then use in a traditional-style synthesizer. While you only get a single oscillator, Zyklopdoes offer eight voices and enough synthesis modules and effects to be very useful. It also sounds amazing: wild and like nothing else really.

Download Zyklop here.

Usual Suspects JE-8086

OK, this is a big one. Usual Suspects is a crack team of mad geniuses that figured out how to emulate the Motorola DSP chips found in 1990s synthesizers like the Access Virus series, Waldorf Micro Q and Microwave 2, and Clavia Nord Lead 2X. Recently, they managed to reverse-engineer the Toshiba chip in the Roland JP-8000, perhaps the most famous of the era’s virtual analog synths and the progenitor of the supersaw wave.

If you’re unfamiliar with the Usual Suspect’s work, these are chip emulators, not software recreations of synthesizers. That is, they host the actual ROM from the original instruments. Without this, you won’t hear a sound. And, as this is a legal gray area, we can’t tell you where to get the ROM. But once you do find it, you’ll have the original JP-8000 in your DAW. What a crazy world we live in.

Find out more on the Usual Suspects site.

Ewan Bristow Plugdata Patches

For this last one, we’re going to recommend a developer rather than a single plugin. Because you really need to know about Ewan Bristow.

Ewan Bristow has really blown up in the last year. He makes what he calls “weird audio devices” and they really do live up to that description. There’s a spectral delay, spectral resynthesis sound manipulator, cepstral morphing (we’d be lying if we said we knew what that was), a spectral filter that converts wavetables into filter shapes, and much more. His work is universally unique and excellent-sounding.

The only catch is these are plugdata patches, not discrete plugins, so they need to be run in the (also free) plugdata programming environment. But you can use Ewan’s creations as you would a plugin, you just need to load the plugdata VST first. Sort of like an ensemble inside Reaktor. (Update: Ewan is now doing regular plugins too! Check them out here.)

Learn more at Ewan Bristow’s Gumroad page.