tipsyツールチップjQueryの tipsy(0.1.7)意外と使いそうで使わないこのプラグイン。入れるとページがうるさくなるし補足しないとダメなら、もっと他の方法でフォローしてあげたい。ユーザビリティとしてはどこまで訪問者側の気持ちに立って使い易くするのか?は議論すべきなところ。もちろん補助ツールなので、アクシビリティな考えでは有効なのだが…。いずれにしても他のビヘイビアとの併用は出来ないので、純粋なテキストのみに使いたい。 <!-- ツールチップ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部分がアローの位置方向やフェードがかかったりとそれぞれの特徴に合わせて表現される。文字組、背景色などがツールチップCSSに依存される事となる。
|