Show a message after a few seconds hover using css or javascript

Question

My question:

When the user hovers over a certain part of text I want a message to display after a few seconds. I would ideally want it all in CSS if it is possible but Javascript is also fine.

For example: Let's say the user hovers over the word book. After 2 seconds a message pops up saying something like "books are read by everyone".

What I've tried

I looked into Tooltip where you can display messages on hover

Html

    <div class="tooltip">Book
      <span class="tooltiptext">Books are read by everyone</span>
    </div>

Css

.tooltip {
      position: relative;
      display: inline-block;
      text-align: center;
    }

    .tooltip .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: black;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;

      /* Position the tooltip */
      position: absolute;
      z-index: 1;
    }

    .tooltip:hover .tooltiptext {
      visibility: visible;
    }



.tooltip {
  position: relative;
  display: inline-block;
  text-align: center;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
<div class="tooltip">Book
      <span class="tooltiptext">Books are read by everyone</span>
    </div>




<!-- end snippet -->

However, I don't know how to display the Tooltip after a given amount of time.

Answer 1

The CSS solution that I made is as follows

Here I create an animation that sets the visibility to visible on the start

@keyframes effect {
  0% {
    visibility: visible;
  }
}

Then on the hover selector I add this animation where effect is the name 1s, is the duration (must be set so that the visibility is set,) infinite is making the animation go on until you get your mouse out of the element, and 2s is the most important one here as it sets the delay.

.tooltip:hover .tooltiptext {
  animation: effect 1s infinite 2s;
}