title: Showing multiple tooltips on same element
body: <p>I try to put tooltips on an element, that changes based on four buttons on the same page. </p>
  
  <pre><code>a.tooltip span {            
    z-index:15;
    position: relative;
    display:none;
    padding:14px 20px;
    margin-top:17.5%;
    margin-left:18%;
    width:300px;
    height:80px;
    line-height:16px;
    border-radius:2px;        
    box-shadow: 0px 0px 6px 3px #666;
    opacity: 0.8;
  }
  
  a.tooltip:hover span{
    display:inline;
    position:absolute; 
    border:2px solid #666;
    color:black;
    background:white repeat-x 0 0;
  }
  </code></pre>
  
  <p>This is my tooltip. I works just fine, but I can't hide it, when I want another tooltip to be displayed.</p>
  
  <p>How do I disable this tooltip and show another one, based on the buttons I clicked? Tooltip1 has to be hidden when Tooltip2 is shown and vice versa.</p>
  
  <p>Dr. Google didn't help.</p>
  
  <p><strong>Image for clarification</strong> :
  <img src="https://i.stack.imgur.com/hfXBn.png" alt="Image for clarification"></p>