title: Turning text into icon with content as tooltip with CSS only
body: <p>I'm trying to turn a hyperlink into an icon while turning the content text into a tooltip. The catch is I'm working in a place where I have only CSS to play with, and I can't modify the HTML or add any Javascript. I'm retrieving data from an external source in a table, and one of the columns is a hyperlink - this I want to transform into an icon with the text-content as a tooltip manner on hover.</p>
  <p>Below snipped is how far I've gotten, is there any way of making the <code>:hover</code> part look, feel and behave more like a tooltip? Or is there perhaps another way completely to achieve what I'm after?</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>.external-link {
      font-size: 0;
  }
  
  .external-link:after {
      content: ' ';
      background: url(https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196) no-repeat;
      display: inline-block;
      height: 32px;
      width: 32px;
  }
  
  .external-link:hover {
      /* Well it shows the text, but it ain't pretty nor very functional.. */
      font-size: initial;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="https://www.stackoverflow.com/" class="external-link"&gt;Stack Overflow&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>