title: How do I change a paragraph text when mouse hover over?
body: <p>How do I change the value of the second paragraph in the second div when hovering over it? making use of the class and not using ID's 
  It should detect the one it's hovering over somehow, or thats what I think atleast.</p>
  
  <p><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;
    border-bottom: 1px dotted black;
  }
  
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute; /* Position the tooltip */
    z-index: 1;
  }
  
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-3.3.1.min.js"&gt;&lt;/script&gt;
  
  &lt;p&gt;Move the mouse over the text below:&lt;/p&gt;
  &lt;div class="tooltip"&gt;Hover over me
    &lt;span class="tooltiptext"&gt;
    &lt;p class=radio&gt; Here is some data &lt;/p&gt;
    &lt;/span&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;div class="tooltip"&gt;Hover over me
    &lt;span class="tooltiptext"&gt;
    &lt;p class=radio&gt; Here is some data &lt;/p&gt;
    &lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>