title: how to create popup on button hover
body: <p>Using CSS &amp; HTML I am trying to create a popup which should appear on a button hover. But in the code below the popup appears both for the <code>&lt;button&gt;</code> &amp; <code>&lt;h2&gt;</code> tag. Since I am a beginner I am not able to understand where the changes are required to get the right output. Please help me fix this.</p>
  
  <p>HTML PAGE</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content=""&gt;
     &lt;title&gt; POPOUP&lt;/title&gt;
  
     &lt;link rel="stylesheet" type="text/css" href="tooltip.css"&gt;
  
  
  &lt;/head&gt;
  &lt;body style="text-align:center"&gt;
  &lt;div class="popup"&gt;
  &lt;h2&gt;Popup&lt;/h2&gt;
  
  &lt;button type="button" id="b1"&gt;BUTTON&lt;/button&gt;
    &lt;span class="popuptext" id="myPopup"&gt;A Simple Popup!&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I do not have proper knowledge of JS hence I have used CSS for the hover functionality.</p>
  
  <p>CSS</p>
  
  <pre><code>/* Popup container - can be anything you want */
  .popup {
      position: relative;
      display: inline-block;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
  }
  
  /* The actual popup */
  .popup .popuptext {
      visibility: hidden;
      width: 160px;
      background-color: #555;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 8px 0;
      position: absolute;
      z-index: 1;
      top: 225%;
      left: 50%;
      margin-left: -80px;
  }
  
  /* Popup arrow */
  .popup .popuptext::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: #555 transparent transparent transparent;
  }
  
  /* Toggle this class - hide and show the popup */
  .popup .show {
      visibility: visible;
      -webkit-animation: fadeIn 1s;
      animation: fadeIn 1s;
  }
  
  .popup:hover .popuptext {
      visibility: visible;
      opacity: 1;
  }
  
  
  
  
  
  
   /* Add animation (fade in the popup) */
  @-webkit-keyframes fadeIn {
      from {opacity: 0;} 
      to {opacity: 1;}
  }
  
  @keyframes fadeIn {
      from {opacity: 0;}
      to {opacity:1 ;}
  }
  </code></pre>