「jQuery」と「jQuery UI」で HTML に彩りを添えよう…第８回「Tooltip」マウスホバーでカーソルに追随して情報を表示

概要

「jQuery UI」公式ページ
jQuery UI  

「Tooltip」についての「Demos & Documentation」
jQuery UI Documentation / API / 1.9 / Tooltip  


10月初旬にリリースされた…

「jQuery UI 1.9」から…

新機能が追加され…

それに伴い若干の仕様変更がありました…

上記公式ページでアナウンスされています…
「What's New in jQuery UI 1.9?」

The menu widget creates nestable menus, great for inline menus, popup menus, or as a building block for complex menu systems.

The spinner widget displays buttons to easily input numeric values via the keyboard or mouse. When used in combination with Globalize, the spinner supports numbers, currencies, and dates in hundreds of locales.

The tooltip widget shows additional information for any element on hover or focus, with support for static content and remote content loaded via Ajax.

The accordion, autocomplete, and tabs widgets have also received huge accessibility improvements. In addition, we've improved the APIs of several widgets, making them easier to use and creating more consistency across plugins.

「jQuery UI 1.9」からの仕様変更に伴い過去記事に変更があります…

第４回「Tabs」のカスタムコードとスタイルシートを一部書き換えました…
過去記事に沿って導入済みで「jQuery UI 1.9」以降を読み込んでいる方は…
お手数ですが下記ページャーからご確認下さい…
「jQuery UI 1.8」までの方は影響ありません…

やっと「plugins」を使わずに…

ツールチップをカスタマイズ出来るようになりました…

これを機に…スクリプト系の各ソーシャルブックマークボタンも…

ボタン毎にツールチップが違って見苦しいので…

「title 属性」「alt 属性」だけの記述に…

仕様変更して統一してもらいたいものですね…

なので…今回は「Tooltip」を導入してみましょう…

「jQuery」と「jQuery UI」の導入方法については…

冒頭か末尾のナビゲーションから…

1ページ目の…第１回「導入」を参照して下さい…

デモの下の「view source」をクリックすると…

ソースコードが開きます…

デモ用の「CSS」は…

別途読み込ませているようですから…

通常…そこに書かれている「CSS」では…

デフォルトのスタイルが適用されます…

デフォルトのスタイルは…

上記リンク先のタブ「THEMES」から…

「Gallery」でテーマを選択して下にスクロール…もしくは…

このページの２番目の画像クリックで…

画像が実寸大に拡大しますので確認して下さい…

尚…当サイトでは…ツールチップは…

オリジナルと「jQuery UI」の２種類使用していますが…

この記事内の画像は「jQuery UI」のツールチップを適用してありますので…

マウスホバーすると「jQuery UI」のカスタマイズした「Tooltip」が表示されます…

それでは…実装している…

「Track the mouse」…つまり…

マウスを追随して動くタイプのツールチップを導入してみましょう…

それだけではつまらないので…

「Custom animation」も追加して…

マウスホバーすると…

「0.25秒」遅れてツールチップが「slideDown」して…

マウスアウトすると…

「0.25秒」遅れてツールチップが「explode」するようにしてみましょう…

「Track the mouse & Custom animation」のカスタムコード

先ずは…「Track the mouse & Custom animation」のカスタムコードです…

「Track the mouse & Custom animation」のカスタムコード

$(document).tooltip({track:true},{show:{effect:"slideDown",delay:250}},{hide:{effect:"explode",delay:250}});

「Track the mouse」だけで良い方は…

デモサイトのカスタムコードそのままで OK です…

「Track the mouse & Custom animation」のカスタム CSS

続いて…「Track the mouse & Custom animation」のカスタム CSS です…

デフォルトのスタイルで良い場合は不要です…

「Track the mouse & Custom animation」のカスタム CSS

body .ui-tooltip{border:none;max-width:400px;background:#1d2b38;opacity:.8;filter:alpha(opacity=80);padding:6px;font-size:12px;font-style:italic;-moz-box-shadow:0 0 8px #58a;-webkit-box-shadow:0 0 8px #58a;box-shadow:0 0 8px #58a}

シンプル＆地味が好みなので…

背景色を半透明にして周りにぼやけた影を付けています…

文字色や文字サイズも含め…

ご自由に弄って下さい…

外部ファイル化する場合は…

「body」と…それに続く「半角スペース」は不要です…

準備が済んだら…HTML に「title 属性」を記述するだけで…

ツールチップが表示されるようになります…

「Track the mouse & Custom animation」の HTML マークアップ

１番目の画像の HTML マークアップです…

１番目の画像の HTML マークアップ

<img title="デモの下の…この部分をクリックするとソースコードが開きます…" border="0" height="38" width="200" src="画像 URL" />

画像以外でも…

「テキストの意味の説明」「リンク先の情報」「引用元の情報」…などなど…

「title 属性」に特別な意味が加わらない HTML ならなんでも OK です…

「テキストの意味の説明」だと…こんな感じ…

[ Hover me!! ]
[ Hover me!! ]

上記色付きテキストの HTML マークアップです…

[ Hover me!! ] の HTML マークアップ

<span style="color:yellow;" title="こんな感じで補足説明が表示されます…">[ Hover me!! ]</span>
<font color="red" title="タグと色を変えてあります…">[ Hover me!! ]</font>

以上です…

お疲れ様でした…

Prev 1 2 3 4 5 6 7 8 9 Extra Next

Design jQuery / Extra JavaScript Current-Label : jQuery