田舎暮らしのウェブ屋ブログ

ホームページのハウツー・グルメレポ・書評 etc・・・

レスポンシブウェブデザインやスマホに使えるツールチップ(説明窓)

レスポンシブやスマホで使えるツールチップ

サイトのリニューアルに当たって、右上にツールチップ(説明窓)を入れました。

レスポンシブに対応したツールチップ

今回のリニューアルでレスポンシブにしたため、スマートフォンなどのタッチデバイスでも使えるツールチップである必要があります。
タッチデバイスにはロールオーバーがないので、http://osvaldas.info/ で紹介されている、レスポンシブに対応したライブラリを使用しました。
※追記:画像のご指摘くださった方ありがとうございました。

紹介されているページは、
http://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly

まず、上記のページ内にある
CSS」(#tooltip からはじまる44行のソース)をコピーしてcssファイルに貼り付け、保存します(仮にこれを「style.css」とする)

次に、同じくページ内にある
JavaScript」($( document ).ready( function()からはじまる76行のソース)をコピーしてjsファイルに貼り付け、保存します(仮にこれを「tooltip.js」とする)

htmlファイルの~内に、

<link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="tooltip.js"></script>

を追加します。
※上記のパスは、htmlファイル、style.css、tooltip.jsが同じフォルダ内にある場合です。パスは保存場所に合わせてください。
※2行目のjquery.min.jsは、必ずtooltip.jsの前に入れてください。

最後に、ツールチップを表示させたい箇所のタグに

title=“表示させたい文章” rel=“tooltip”

を追加します。

例えば、単語にマウスオーバーしたときに表示させたいのであれば

<abbr title="ホームページ制作">ミライヤネット</abbr>

画像にマウスオーバーしたときに表示させたいのであれば

<img title="ミライヤネットトップへ" alt="Miraiyanet" src="header_mi.gif" />

という感じです。

これで、スマートフォンやタブレットでも使えるツールチップの設置完了です。
ツールチップの色や角丸などを変更したい場合は、style.css内を編集します。

初めてマウスオーバーしたとに、表示されたツールチップがブルブル震えるのがちょっと気になるところですが、それに目を瞑れば簡単に設置できるプラグインです。

関連記事

コメント

コメントはまだありません。

コメントの投稿

お名前

メールアドレス

URL

トラックバック: http://miraiyanet.com/myblog/jquery130415.html/trackback

ページトップへ