HTML ツールチップを表示したい

リンクなどに補足的な情報を追加したいときaタグのtitle属性を使用します。

タグにtitle属性を追加しておくと、マウスポインタがホバーしたときに、ツールチップが表示されるようになります。title属性の値には、ツールチップに表示したいテキスト内容を設定します。このサンプルではaタグを使用しましたが他のどんなタグにも使用できます。ただし、スマートフォンやタブレットのブラウザでは、title属性のツールチップは表示されません。

<ul>
        <li><a href="#" title="PDFファイル20MB">通販カタログ</a></li>
        <li><a href="#" title="JPEGファイル15MB">商品画像</a></li>
</ul>