title: ABBR tooltip CSS styling: How to suppress original tooltip, add rounded corners?
body: <p>I use CSS to style the <code>abbr</code> tool tip:</p>
  
  <pre><code>  abbr {
      position: relative;
    }
    abbr:hover::after {
      position: absolute;    
      width: 300px;
      bottom: 100%;
      left: 100%;
      display: block;
      padding: 1em;
      background: #ffffe1;
      content: attr(title);
    }
  
  &lt;abbr title="As Soon As Possible"&gt;ASAP&lt;/abbr&gt;
  </code></pre>
  
  <p>However, the original old-fashioned <code>abbr</code> tooltip is displayed too, in addition to the styled new one. How can I suppress it?</p>
  
  <p>This cannot be simply solved with the answer to a <a href="https://stackoverflow.com/questions/19746767/hide-title-from-tooltip">similar question</a>. The attribute name <code>title</code> must be kept and replaced at run-time with a javascript.</p>