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

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

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

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

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

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

参照サイト

ASCII.jp：透過PNG対応！jQueryでオリジナルツールチップ｜Web制作の現場で使えるjQuery　UIデザイン入門

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

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

CSS

span.toolchip {
color: #999999;
font-size: 80%;
}

HTML

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

javascript

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

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

Javascript

var span_chips = $('span.spanTC');
// javascript ONの時、非表示
var off_chip_style = {display: 'none'};
// 表示されるツールチップのスタイル
var on_chip_style = {
color: '#FFFFFF',
display: 'block',
padding: '1em',
backgroundColor: '#990000',
position: 'absolute'
};
// span class="spanTC"要素を非表示に。
span_chips.each(function(){
$(this).css(off_chip_style);
});
// a class="spanTC"要素にhover時のイベント設定
$('a.spanTC').each(function(i){
$(this).hover(function(){
span_chips.eq(i).css(on_chip_style);
}, function(){
span_chips.eq(i).css(off_chip_style);
// マウス移動時に追従してツールチップも動く
}).mousemove(function(e){
span_chips.eq(i).css({
'top' :e.pageY + 10 + 'px',
'left':e.pageX + 10 + 'px'
});
});
});

実行結果

ToolChip テスト1ここが表示されます。テスト1
ToolChip テスト2ここが表示されます。テスト2

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

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

HTML

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

Javascript

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

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

Javascript

// 表示されるツールチップのスタイル
var on_chip_stype = {
color: '#FFFFFF',
display: 'block',
padding: '1em',
backgroundColor: '#990000',
position: 'absolute'
};
$('a.titleTC').each(function(){
$(this).hover(function(){
$(this).after($('<span class="titleTC">' + $(this).attr('title') + '</span>').css(on_chip_style));
}, function(){
// マウスアウト時に追加した要素を削除
$('span.titleTC').remove();
}).mousemove(function(e){
$('span.titleTC').css({
'top': e.pageY + 10 + 'px',
'left':e.pageX + 10 + 'px'
});
});
});

実行結果

div要素に記述

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

DivToolChip.php

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

Javascript

class DivToolChip {
private $data = array();
private $stoc = array();
public function __construct()
{
$this->data['foo'] = '<img src="/img/icon/people.gif" /><p>foo18歳。趣味はとくにありません。</p>';
$this->data['bar'] = '<img src="/img/icon/people.gif" /><p>これはbarさんの紹介です。</p>';
$this->data['hoge'] = '<img src="/img/icon/people.gif" /><p>これはhogeさんの紹介です。</p>';
}
private function set($key)
{
$this->stoc[] = $key;
}
public function viewTrg($key, $url, $title)
{
$this->set($key);
printf('<a href="%s" class="divTC%s">%s</a>', $url, $key, $title);
}
public function viewBody()
{
foreach ($this->stoc as $key) {
$html .= sprintf('<div class="divTC%s">%s</div>', $key, $this->data[$key]);
}
printf('<div class="TCBody">%s</div>', $html);
}
}

Javascript

// javascript ONの時、非表示
var off_chip_style = {display: 'none'};
// 表示されるツールチップのスタイル
var on_chip_style = {
color: '#FFFFFF',
display: 'block',
padding: '1em',
backgroundColor: '#990000',
position: 'absolute'
};
$('div[class^="divTC"]').css(off_chip_style);
$('a[class^="divTC"]').each(function(){
var class_name = '.TCBody .' + $(this).attr('class');
$(this).hover(function(){
$(class_name).css(on_chip_style);
}, function(){
$(class_name).css(off_chip_style);
}).mousemove(function(e){
$(class_name).css({
'top': e.pageY + 10 + 'px',
'left':e.pageX + 10 + 'px'
});
});
});

HTML

// ヘッダ
require_once('DivToolChip.php');
$dtc = new DivToolChip();
// コンテンツ
<ul>
<li><?php $dtc->viewTrg('hoge', '', 'Hoge'); ?></li>
<li><?php $dtc->viewTrg('bar', '', 'Bar'); ?></li>
<li><?php $dtc->viewTrg('foo', '', 'Foo'); ?></li>
</ul>
// フッタ
<?php $dtc->viewBody(); ?>

CSS

PHP

<?php
.TCBody div {
width: 320px;
}
.TCBody div img {
float: left;
width: 80px;
}
.TCBody div p {
float: right;
width: 200px;
}
.TCBody div
{
zoom:1;/*for IE 5.5-7*/
}
.TCBody div:after
{/*for modern browser*/
content:".";
display: block;
height:0px;
clear:both;
visibility:hidden;
}
?>

実行結果

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

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

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

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

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

投稿日	2009年11月10日 04:33
カテゴリ	JavaScript \| PHP
タグ	jQuery \| テストコード \| 基礎
トラックバック URL	http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1194

コメントする

Name

Email Address

URL

コメント(スタイル用のHTMLタグを使えます)

ログイン情報を記憶

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

参照サイト

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

CSS

HTML

javascript

Javascript

実行結果

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

HTML

Javascript

Javascript

実行結果

div要素に記述

DivToolChip.php

Javascript

Javascript

HTML

CSS

PHP

実行結果

コメント

コメントする

KANTENNA.COM

プログラム

カテゴリ

Memo

プログラムの原則

jQuery不要のアニメーションスクロールライブラリAOS

Error 1449 The user specified as a definer (‘username’@’hostname’) does not exist

Invalid default value for カラム名

14: curl#6 – “Could not resolve host: mirrors.iuscommunity.org; 不明なエラー”

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

参照サイト

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

CSS

HTML

javascript

Javascript

実行結果

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

HTML

Javascript

Javascript

実行結果

div要素に記述

DivToolChip.php

Javascript

Javascript

HTML

CSS

PHP

実行結果

コメント

コメントする

プログラム

カテゴリ

Memo

プログラムの原則

jQuery不要のアニメーションスクロールライブラリAOS

Error 1449 The user specified as a definer (‘username’@’hostname’) does not exist

Invalid default value for カラム名

14: curl#6 – “Could not resolve host: mirrors.iuscommunity.org; 不明なエラー”

PAGE RANK

TIME LINE

Tag