KANTENNA.COM

Solarized

HOME > WEBプログラム覚書 > [jQuery]ツールチップをいろいろと検討

[jQuery]ツールチップをいろいろと検討

ツールチップについて色々と検討。

最近思うのですが、マウス載せると何か出るよと気づかせる表現はあるべきですが、 載せたあとのアニメーションとか不要じゃないですか？

情報見たいからマウス載せてるわけで、すぐ見たいわけです。 アニメーションはいいから0.1秒でも早く表示してくれって思うのは僕だけでしょうか？？

まぁそんな偉そうなこと言える立場でもないので、本題。 作り方は下記ページが分かりやすかったので参考にしてます。

参照サイト

トリガー要素の後ろにspanで記述

CSSはjavascriptが無効の場合のStyleを記述します。

CSS

CSS
  1.  span.toolchip {
  2.   color: #999999;
  3.   font-size: 80%;
  4.  }

HTML

HTML
  1.  <ul>
  2.   <li><a href="" class="spanTC">ToolChip テスト1</a><span class="spanTC">ここが表示されます。テスト1</span></li>
  3.   <li><a href="" class="spanTC">ToolChip テスト2</a><span class="spanTC">ここが表示されます。テスト2</span></li>
  4.  </ul>

javascript

1ページに1つならいいのですが、複数ツールチップを表示させたい要素がある場合、 イベントを発生させる要素と内容を連動させる必要があります。

上記HTMLのように 「<a href="" class="toolchip"></a>」と「<span class="toolchip"></span>」 を必ず対で書く前提となります。

Javascript
  1.  var span_chips = $('span.spanTC');
  2.  
  3.  // javascript ONの時、非表示
  4.  var off_chip_style = {display: 'none'};
  5.  
  6.  // 表示されるツールチップのスタイル
  7.  var on_chip_style = {
  8.   color: '#FFFFFF',
  9.   display: 'block',
  10.   padding: '1em',
  11.   backgroundColor: '#990000',
  12.   position: 'absolute'
  13.   };
  14.  
  15.  // span class="spanTC"要素を非表示に。
  16.  span_chips.each(function(){
  17.   $(this).css(off_chip_style);
  18.  });
  19.  
  20.  // a class="spanTC"要素にhover時のイベント設定
  21.  $('a.spanTC').each(function(i){
  22.  
  23.   $(this).hover(function(){
  24.   span_chips.eq(i).css(on_chip_style);
  25.   }, function(){
  26.   span_chips.eq(i).css(off_chip_style);
  27.  
  28.   // マウス移動時に追従してツールチップも動く
  29.   }).mousemove(function(e){
  30.   span_chips.eq(i).css({
  31.   'top' :e.pageY + 10 + 'px',
  32.   'left':e.pageX + 10 + 'px'
  33.   });
  34.   });
  35.  });

実行結果

トリガー要素のtitle属性に記述

こちらはブラウザの実装まかせでCSSの設定や spanのようにインデックスを気にする必要はないのでラクな気がします。

HTML

HTML
  1.  <ul>
  2.  <li><a href="" class="titleTC" title="ここが表示されます test1">ToolChipテスト1</a></li>
  3.  <li><a href="" class="titleTC" title="ここが表示されます test2">ToolChipテスト2</a></li>
  4.  </ul>

Javascript

tilte属性をどうやって表示するのか？ spanなどの要素でtitleの内容を囲んでやります。

注意するべき点は造ったものはちゃんと削除するというところです。

Javascript
  1.  // 表示されるツールチップのスタイル
  2.  var on_chip_stype = {
  3.   color: '#FFFFFF',
  4.   display: 'block',
  5.   padding: '1em',
  6.   backgroundColor: '#990000',
  7.   position: 'absolute'
  8.   };
  9.  
  10.  $('a.titleTC').each(function(){
  11.  
  12.   $(this).hover(function(){
  13.   $(this).after($('<span class="titleTC">' + $(this).attr('title') + '</span>').css(on_chip_style));
  14.   }, function(){
  15.   // マウスアウト時に追加した要素を削除
  16.   $('span.titleTC').remove();
  17.   }).mousemove(function(e){
  18.   $('span.titleTC').css({
  19.   'top': e.pageY + 10 + 'px',
  20.   'left':e.pageX + 10 + 'px'
  21.   });
  22.   });
  23.  });

実行結果

div要素に記述

画像使ったりしたいときは適当な場所にHTMLで埋め込む方法が良さそうです。 ただし位置が離れてて数が多いと順番のミスが起きやすくなるので、 トリガーとなる要素と内容がリンクできる仕組みを作っておくと便利そうです。

DivToolChip.php

ここでは直接データ書いてますが実際はtxtとかcsv、DBなどから データを取得した方がよいかと思います。

Javascript
  1.  class DivToolChip {
  2.  
  3.   private $data = array();
  4.   private $stoc = array();
  5.  
  6.   public function __construct()
  7.   {
  8.   $this->data['foo'] = '<img src="/img/icon/people.gif" /><p>foo18歳。趣味はとくにありません。</p>';
  9.   $this->data['bar'] = '<img src="/img/icon/people.gif" /><p>これはbarさんの紹介です。</p>';
  10.   $this->data['hoge'] = '<img src="/img/icon/people.gif" /><p>これはhogeさんの紹介です。</p>';
  11.   }
  12.  
  13.   private function set($key)
  14.   {
  15.   $this->stoc[] = $key;
  16.   }
  17.  
  18.   public function viewTrg($key, $url, $title)
  19.   {
  20.   $this->set($key);
  21.   printf('<a href="%s" class="divTC%s">%s</a>', $url, $key, $title);
  22.   }
  23.  
  24.   public function viewBody()
  25.   {
  26.   foreach ($this->stoc as $key) {
  27.   $html .= sprintf('<div class="divTC%s">%s</div>', $key, $this->data[$key]);
  28.   }
  29.   printf('<div class="TCBody">%s</div>', $html);
  30.   }
  31.  }
Javascript
  1.  // javascript ONの時、非表示
  2.  var off_chip_style = {display: 'none'};
  3.  
  4.  // 表示されるツールチップのスタイル
  5.  var on_chip_style = {
  6.   color: '#FFFFFF',
  7.   display: 'block',
  8.   padding: '1em',
  9.   backgroundColor: '#990000',
  10.   position: 'absolute'
  11.   };
  12.  
  13.  $('div[class^="divTC"]').css(off_chip_style);
  14.  
  15.  $('a[class^="divTC"]').each(function(){
  16.   var class_name = '.TCBody .' + $(this).attr('class');
  17.  
  18.   $(this).hover(function(){
  19.   $(class_name).css(on_chip_style);
  20.   }, function(){
  21.   $(class_name).css(off_chip_style);
  22.  
  23.   }).mousemove(function(e){
  24.   $(class_name).css({
  25.   'top': e.pageY + 10 + 'px',
  26.   'left':e.pageX + 10 + 'px'
  27.   });
  28.   });
  29.  });
HTML
  1.  // ヘッダ
  2.  
  3.  require_once('DivToolChip.php');
  4.  $dtc = new DivToolChip();
  5.  
  6.  // コンテンツ
  7.  <ul>
  8.  <li><?php $dtc->viewTrg('hoge', '', 'Hoge'); ?></li>
  9.  <li><?php $dtc->viewTrg('bar', '', 'Bar'); ?></li>
  10.  <li><?php $dtc->viewTrg('foo', '', 'Foo'); ?></li>
  11.  </ul>
  12.  
  13.  
  14.  // フッタ
  15.  <?php $dtc->viewBody(); ?>

CSS

PHP
  1.  <?php
  2.  .TCBody div {
  3.   width: 320px;
  4.  }
  5.  
  6.  .TCBody div img {
  7.   float: left;
  8.   width: 80px;
  9.  }
  10.  
  11.  .TCBody div p {
  12.   float: right;
  13.   width: 200px;
  14.  }
  15.  
  16.  .TCBody div
  17.  {
  18.   zoom:1;/*for IE 5.5-7*/
  19.  }
  20.  
  21.  .TCBody div:after
  22.  {/*for modern browser*/
  23.   content:".";
  24.   display: block;
  25.   height:0px;
  26.   clear:both;
  27.   visibility:hidden;
  28.  }
  29.  ?>

実行結果

これはhogeさんの紹介です。

これはbarさんの紹介です。

foo18歳。趣味はとくにありません。

画像使ったりして内容が多くなると、もはやChipって感じではないですね。 普通に見えるようにしといた方がいい気がしてきます。

サイトにより全然違ってくるとは思いますが、 管理のしやすさアクセシビリティを考えると３つほど試した中ではTitle属性に 仕込むのがいい気がします。個人的には。

jQueryクックブック
作者:jQuery Community Experts | 価格:￥ 3,780
投稿日 2009年11月10日 04:33
カテゴリ JavaScript | PHP
タグ javascript | jQuery | テストコード
トラックバック URL http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1194

トラックバック(0)

コメント

コメントする
Name
Email Address
URL
PAGE RANK
TIME LINE
2012
02.08

[Ubuntu11.10]Winows XPユーザーがUbuntuを使ってみて

Windows XPとUbuntuのデュアルブート環境にしてみておもったこと。

2012
02.03

[jQuery]closest()とparents()

今から16年前Netscapeブラウザのソースコードの公開方法の会議の中で、初めてオープンソースという言葉が使われた今日、 みなさんいかがお過ごしでしょうか。

今回の投稿はそれとは関係のないjQueryのparents()とclosest()が 似てたので何が違うのか試した時のメモです。

2012
02.01

[jQuery Mobile]初期化イベントメモ

jQuery Mobileは読み込まれてから

mobileinit -> pagebeforecreate -> pagecreate -> pageinit

の順番でイベントが発生する。

2012
02.01

[WordPress]管理画面のフッタのフィルタとアクション。

時間も時間なので、あまり使用頻度の高くない微妙なネタを。

会員制サイトなどで不特定多数の人にログインさせる場合、フッタのバージョン情報は隠しておきたかったり、 こじゃれたメッセージを表示したいときとか使うアクションとフィルタ。

2012
01.28

[WordPress] ブログの情報を取得する方法とノーキャッシュ疑惑

ブログのget_bloginfo()で取れないデータが必要な場合に使うもの。

2012
01.27

検索エンジンにやさしいパンくずリストのコーディング

ってなんだ。

2012
01.26

[jQuery Mobile]ダイアログ

jQuery Mobileにおけるダイアログの扱いはウインドウではなくページ。 なので通常のページと同様に扱える。ダイアログウインドウを出す。じゃなくダイアログページに遷移する。的な。

2012
01.25

[Ubuntu11.10]Ubuntuのインストール後の設定

インストール完了後の環境構築。PC起動時いちいちBIOSからブートドライブ選んで ブートするのかと思ってたら起動時にOS選択画面が出てくる。

すばらしいですね。

2012
01.24

[Ubuntu11.10]Windows XPとUbuntuのデュアルブート環境

いろいろあってUbuntuをインストールすることに。

2012
01.23

MinGW+Mintty+Git

MinGW+Mintty+Gitをやろうとして失敗に終わった。このエントリーには収穫できるものはありません。

Tags