[Web] JavaScriptは使わずツールチップを表示する

今日は「JavaScriptは使わずCSSのみでツールチップを実現する」事を備忘録的にメモめも。

要素のtitle属性を利用する

入力欄：

入力欄にマウスを合わせてください（マウスオーバー）。ちょっと待ってるとツールチップが表示されます。以下のソースコードのように簡単に実装できます。

<input type='text' title='何か文字を入力してください'></input>

CSSを利用する

簡単にツールチップ触れていただきありがとうございますを実現するぞー！！

上の「ツールチップ」というリンクにマウスを合わせてください（マウスオーバー）。ツールチップが出ると思います。これはリンクタグ（Aタグ）のホバーというイベントを利用しています。CSSでリンクにマウスを合わせた時のスタイルが指定できるんです。ソースは以下です。

<style>
  a.tooltip:hover {background:#ffffff; text-decoration:none;}
  a.tooltip span {display:none; padding:2px 3px; margin-left:8px;}
  a.tooltip:hover span {display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;}
</style>
<div>
  簡単に<a class="tooltip" href="#">ツールチップ<span>触れていただきありがとうございます</span></a>を実現するぞー！！
</div>

まとめ

ツールチップを表示する方法は色々とあります。今回対象外だったJavaScriptを利用したツールチップ表示もあります。個人的には、要素のtitle属性を利用するのが簡単なので、それがいいなぁと。