Stripe's obscuring tooltips

February 01, 2021

The tooltip is in the way

In general, Stripe has great design. But here they’ve got tooltips with important error codes hidden away in a tooltip that appears when you hover over the “Failed” chip.

There’s nothing wrong with the tooltip itself, though it would be better to just give the decline code/error message its own column in the table.

The problem is that the tooltip appears above the chip, which obscures two rows in the table above it. If you’re trying to quickly hover over each failure and see what the decline code was, you can’t go up a row to hover the next failed chip. The tooltip stays in place until your mouse stops hovering the chip or the tooltip element itself.

Solution

Put the tooltip to the right and then you’ll be able to hover up and down the rows all you want.