css - CSSのみを使用してテキストをツールチップとしてコンテンツを含むアイコンに変換する

Question

コンテンツのテキストをツールチップに変えながら、ハイパーリンクをアイコンに変えようとしています。問題は、CSS しかない場所で作業していて、HTML を変更したり Javascript を追加したりできないことです。テーブル内の外部ソースからデータを取得していますが、列の 1 つがハイパーリンクです。これをホバー時のツールヒントとしてテキスト コンテンツを含むアイコンに変換したいと考えています。

以下は、私がどこまで到達したかを抜粋したものですが、:hoverパーツの外観、感触、動作をツールチップのようにする方法はありますか? それとも、私が求めているものを完全に達成する別の方法があるのでしょうか?

.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;
}

<a href="https://www.stackoverflow.com/" class="external-link">Stack Overflow</a>