レスポンシブWebデザインに対応のツールチップ用jQueryプラグインが良い感じ

tooltip-responsive-jquery-thumb

パンくずナビゲーションや文字表示の無いアイコンボタンにはツールチップを使ったほうがユーザビリティが上がると思い、実装してみることにしました。

探すと色々出てくる中、レスポンシブに対応したツールチップ用のjQueryプラグインがあったのでご紹介します。導入も結構簡単です。

ツールチップ用のjQueryプラグイン

プラグインの名前は「Responsive and Mobile-Friendly Tooltip」。DEMOページはこちらになります。

使い方

ツールチップの表示は3つの手順で終わります。

  1. CSSの記述
  2. Javascriptの記述
  3. ツールチップを表示したい要素に専用の属性を付与

CSSの記述

以下のソースコードをCSSファイルに記述するか、<style></style>タグでHTMLに埋め込みます。

 Javascriptの記述

以下のソースコードをJavascriptファイルに記述するか、<script></script>タグでHTMLに埋め込みます。jQueryライブラリより後に読み込むようにしないと動きません。

 ツールチップを表示したい要素に専用の属性値を付与

CSS、Javascriptを記述したら準備はOKです。ツールチップを表示したい要素に「rel=”tooltip”」の属性値を加えます。そうすると、その要素の「title」属性に記述された文字がツールチップで表示されるようになります。

要素にツールチップ用の属性を追加するjQueryコード

おまけでこのツールチップ用の属性をjQueryで追加するソースコードを載せておきます。 CMSやブログサービス等を使っていて、コアファイルを弄らないと属性の追加が出来ない場合はこちらのソースコードで対応出来ます。

2行目の「#element a」の部分に設定したい要素を指定し、4行目のtitleの値を任意の文字に変更します。 このソースコードはjQueryライブラリより後、ツールチップのソースコードよりも前に記述しないと動かないので注意して下さい。

 

2014年10月16日追記:

Twitterでご指摘をいただきました。

どうやらmouseentermouseleaveはスマホでうまく動作しないようです。iPhoneでしか確認せずに”スマホサイト”と書いてしまいました、勉強不足を痛感しています。タイトルから”スマホサイト”の文字を削除しました。

色々調べたところ、タッチ操作ではtouchleavetouchmoveといったイベントがあるようです。(参考: マウス・タッチ・ペンのタッチ操作イベント|Web制作 W3G

また、同じくこのプラグインを紹介している記事で言及されていることを引用します。

例えばPCサイトでマウスを乗せたらツールチップが出て、クリックするとリンクに飛ぶ、という箇所は、スマフォではタップすると先にツールチップが出てそのまま止まります。リンク先に飛ぶにはもう一度タップしなくてはなりません。ユーザーに「なぜリンク先に行かないの?」と思われてしまう可能性もあります。

レシポンシブWebデザイン対応のツールチップを実装するjQueryコード – かちびと.net

これ、自分も使ってみて一番最初に思いました。リンクにツールチップを付けてしまうと2回タップする必要が出てくるんですね。せっかくタップしてくれたのに「1回でリンク先に飛ばない」という通常ではない挙動のせいでページ移動を諦めてしまう可能性があります。なるべくリンクではなく補助機能として本当に説明が必要な箇所に付けたほうが良さそうです。

この指摘がなければ勘違いしたままでした、ありがとうございました。

最終更新日:2014年10月16日

コメント

「何かそこ違うよ」「こうした方が良い」っていう部分があったら指摘して頂けると嬉しいです。

トラックバック

トラックバックは現在ありません。

Trackback: https://increment-log.com/tooltip-responsive-jquery/trackback/