This makes them keyboard-accessible.
For mouse users, the only change here is that the focus outline will remain on the button once clicked (in future, this can be solved with :focus-ring, but for now this would require a polyfill).
the tooltip is explicitly hidden on mouseleave
, so even though the <button>
retains focus after clicking, the tooltip won't stay visible once mouse user moves away.
the mouse hover styles have explicitly NOT been make to also apply to :focus, so as to minimise the visual impact for mouse users (though the browser's default outline will remain visible).