title: Show a message after a few seconds hover using css or javascript
body: <p>My question:</p>
  <p>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.</p>
  <h2>For example: Let's say the user hovers over the word book. After 2 seconds a message pops up saying something like &quot;books are read by everyone&quot;.</h2>
  <p>What I've tried</p>
  <p>I looked into Tooltip where you can display messages on hover</p>
  <p><strong>Html</strong></p>
  <pre><code>
  
  
      &lt;div class=&quot;tooltip&quot;&gt;Book
        &lt;span class=&quot;tooltiptext&quot;&gt;Books are read by everyone&lt;/span&gt;
      &lt;/div&gt;
  
  
  </code></pre>
  <p><strong>Css</strong></p>
  <pre><code>.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="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="tooltip"&gt;Book
        &lt;span class="tooltiptext"&gt;Books are read by everyone&lt;/span&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  
  
  &lt;!-- end snippet --&gt;
  
  </code></pre>
  <p>However, I don't know how to display the Tooltip after a given amount of time.</p>