tipsyツールチップ

jQueryの tipsy（0.1.7）意外と使いそうで使わないこのプラグイン。入れるとページがうるさくなるし補足しないとダメなら、もっと他の方法でフォローしてあげたい。ユーザビリティとしてはどこまで訪問者側の気持ちに立って使い易くするのか？は議論すべきなところ。もちろん補助ツールなので、アクシビリティな考えでは有効なのだが…。いずれにしても他のビヘイビアとの併用は出来ないので、純粋なテキストのみに使いたい。

DEMO1

DEMO2

DEMO3

DEMO4

DEMO5

<!-- ツールチップjs設定 -->
<script type　="text/javascript" src="jquery-ui/scripts/jquery-1.3.2.min.js"></script>
<script type　="text/javascript" src="jquery-ui/tipsy/docs/javascripts/jquery.tipsy.js">
</script>
 <!-- ツールチップcss設定 -->
<link rel　="stylesheet" href="jquery-ui/tipsy/docs/stylesheets/tipsy.css" type="text/css">
<link rel　="stylesheet" href="jquery-ui/tipsy/docs/tipsy-docs.css" type="text/css">

を</head>要素に埋め込む

<!-- ツールチップ設定例 -->
<script type="text/javascript">
$(function() {
 $('#example-1').tipsy();
$('#example-2').tipsy();
$('#example-3').tipsy();
$('#north').tipsy({gravity: 'n'});
$('#south').tipsy({gravity: 's'});
$('#east').tipsy({gravity: 'e'});
$('#west').tipsy({gravity: 'w'});
$('#auto-gravity').tipsy({gravity: $.fn.tipsy.autoNS});
$('#example-fade').tipsy({fade: true});
$('#example-fade-1').tipsy({fade: true});
$('#example-fade-2').tipsy({fade: true});
$('#example-fade-3').tipsy({fade: true});
$('#example-custom-attribute').tipsy({title: 'id'});
$('#example-callback').tipsy({title: 
function() { return this.getAttribute('original-title').toUpperCase(); } });
$('#example-fallback').tipsy({fallback: "Where's my tooltip yo'?" });
$('#example-html').tipsy({html: true });
});
</script>

本文記述のid部分がアローの位置方向やフェードがかかったりとそれぞれの特徴に合わせて表現される。文字組、背景色などがツールチップＣＳＳに依存される事となる。
とにもかくにもスクリプトを3つ以上組むと極端にパフォーマンスが悪くなりこのページのYSlowの評定が69のD判定だった。組み方にもよるがjQueryは一発芸的な大技として1つ小技として2つ目を基準に拡張していくべきなのかも。