2011/11/24更新

[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属性を利用するのが簡単なので、それがいいなぁと。







こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。