シンプルなツールチップも簡単に実装できるだけなく、デザインのカスタマイズが可能で、対応トリガーも豊富なツールチップのスクリプト「BeautyTips」を紹介します。
BeautyTipsは機能が豊富というだけでなく、テキストや画像、AJAXコンテンツの表示、ツールチップの表示位置の自動補正など基本性能もしっかりと抑えられており、フォームエレメントへの表示、ツールチップ元の変更なども可能です。
ツールチップはcanvasで描かれており、画像は必要ありません。
対応ブラウザはIE6.x+, Fx3.x, Op8+, Safari3.xとのことで、canvas非対応ブラウザにはExplorerCanvasが使用されています。また、IE6のz-indexへの対応にbgiframe、ホバー処理にhoverIntentが使用されています。
※Chrome 1, Fx2でも正常に動作しました。
BeautyTipsの対応トリガー
ツールチップ表示のトリガーは、ホバーやクリックをはじめ多くのアクションに対応しており、ディレイを設定することもできます。
- 対応トリガーの一覧
- blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and error
BeautyTipsはjQueryのプラグインのため、実装にはjquery.jsが必要です。
jQuery 1.2.6, 1.3共に対応。
Post on:2009年1月26日
