CSS tooltip delay

I have the following code from an answer from stackexchange:

It really fits my use case, and I want to use it, however I try and fail to add one tweak: so that tooltip would appear after some delay, let’s say 2 secs. I’ve tried adding animation-delay, transition, transition-delay properties to different css objects to no avail. Can someone help me out?

Found the solution after some more experimenting. Needed to change display: none
and display: block to visibility: hidden and visibility: visible with added transition: visibility 0s linear 1s.