designWeb全般webmasterデザインメモTOPコーディングjQuery【jQuery】ツールチップの作り方ツールチップとは、画像やテキスト上にマウスカーソルを合わせたときに補足的なテキストを吹き出しのようにして表示させるUIデザインです。イメージとしてはimg要素のalt属性のような感じですが、alt属性は各ブラウザごとにデザインなども違ってきます。jQueryを使えば、自由にデザインができ、ブラウザも関係なく動かすことができます。そこで、CSSとjQueryを組み合わせた、すごくシンプルなツールチップを作ってみたいと思います。CSSで装飾するスタイルシートを使って簡易的なツールチップの装飾をしていきます。none;」でカーソルが合わさるまでテキストを非表示にしておきます。あとは、背景やボーダーなどで体裁を整えているだけです。jQueryで制御する続いて、jQueryでツールチップの動きを制御していきます。});});簡単に言うと、a要素にマウスが重なったら「.tooltip」の要素を表示させ、マウスが離れたら非表示にするという処理をしています。mousemove()イベントを使ってa要素上でのマウスの動きに合わせてツールチップが動くように処理しています。上記では、分かりやすくイベントごとに分けて記述しましたが、メソッドチェーンなどを使って短く記述することもできます。});});これで、少しすっきりした記述になりました。簡易的ではありますが、以上がjQueryを使ったツールチップの作り方となります。