title: Hide title from tooltip
body: <p>I'm making a tooltip using CSS. Now using the following html code</p>
  
  <pre><code>&lt;div title="This is some information for our tooltip." class="progress3"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the following CSS</p>
  
  <pre><code>.progress3{
  display: inline;
  position: relative;
  }
  
  .progress3:hover:after{
  background: #333;
  background: rgba(0,0,0,.8);
  border-radius: 5px;
  bottom: 26px;
  color: #fff;
  content: attr(title);
  left: 20%;
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  width: 220px;
  content: attr(title);
  }
  
  .progress3:hover:before{
  border: solid;
  border-color: #333 transparent;
  border-width: 6px 6px 0 6px;
  bottom: 20px;
  content: "";
  left: 50%;
  position: absolute;
  z-index: 99;
  }
  </code></pre>
  
  <p>Now it works, when I hover over it shows the tooltip, but it also shows the title...
  How do I remove what's circled in orange in the image below.</p>
  
  <p><img src="https://i.stack.imgur.com/tB0Jd.png" alt="enter image description here"></p>