Dreamweaver での Spry ツールヒント Widget の使用

Spry ツールヒント Widget は、Web ページ上にある特定のエレメントにユーザーがマウスポインターを合わせたときに補足情報を表示するためのものです。この補足情報は、ユーザーがポインターを再び動かすと表示されなくなります。また、表示がより長く持続するようにツールヒントを設定すれば、ツールヒントコンテンツに対するユーザーの操作を可能にすることもできます。

ツールヒント Widget は、次の 3 つのエレメントから構成されます。

• ツールヒントコンテナ。ユーザーの操作によってツールヒントがアクティブになったときに表示する、コンテンツやメッセージを含んでいるエレメントです。

• ページエレメント。ツールヒントをアクティブにするエレメントです。

• コンストラクタースクリプト。ツールヒントの機能を作成するよう Spry に指示する JavaScript です。

ツールヒント Widget を挿入すると、div タグを使用してツールヒントコンテナが作成され、span タグで囲んだ "トリガー" エレメント（そのツールヒントをアクティブにするページエレメント）が配置されます。これらのタグは初期設定で使用されますが、ページのボディ内ではツールヒントやトリガーエレメントとして任意のタグを使用できます。

ツールヒント Widget を使用する際は、次の点に留意してください。

• 開いたツールヒントは、別のツールヒントが開かれる前に閉じられます。

• ツールヒントは、トリガー領域にユーザーがマウスポインターを置いている間は表示され続けます。

• トリガーおよびツールヒントコンテンツに使用するタグの種類に制限はありません （ただし、ブラウザーの互換性によるレンダリングの問題を避けるため、常にブロックレベルのエレメントを使用することをお勧めします）。

• ツールヒントの表示位置は、初期設定ではカーソルから右と下に 20 ピクセル離れた位置です。表示位置を独自に設定するには、プロパティインスペクターの「水平方向のオフセット」および「垂直方向のオフセット」オプションを使用します。

• 現在のところ、ブラウザー上にページが表示される時点でツールヒントを開いておくようにする方法はありません。

ツールヒント Widget に必要な CSS はごくわずかです。Spry では、JavaScript を使用してツールヒントを表示し、閉じ、配置します。ツールヒントのスタイルは、標準的な CSS のテクニックを使用し、作成するページの必要に応じた任意の方法で指定できます。初期設定 CSS ファイルに含まれている唯一のルールは、Internet Explorer 6 の問題を回避し、フォームエレメントや Flash オブジェクトの上にツールヒントが表示されるようにするものです。

Spry ツールヒント Widget の動作およびコードについて詳しくは、www.adobe.com/go/learn_dw_sprytooltip_jp を参照してください。

Spry ツールヒント Widget の操作に関するビデオチュートリアルについては、www.adobe.com/go/lrvid4046_dw_jp を参照してください。

ツールヒント Widget の挿入

この操作により、新しいツールヒント Widget、ツールヒントコンテンツのコンテナ、および、そのツールヒントのトリガーとして機能するプレースホルダーテキストが挿入されます。

また、既にページ上にあるエレメント（イメージなど）を選択してからツールヒントを挿入することもできます。その場合は、選択したエレメントが新しいツールヒントのトリガーになります。トリガーのエレメントには Dreamweaver によって自動的に ID が割り当てられる（まだ ID がない場合）ため、選択する対象はフルタグのエレメント（img タグや p タグなど）である必要があります。

ツールヒント Widget オプションの編集

オプションを設定して、ツールヒント Widget の動作をカスタマイズできます。

1. ページ上のツールヒントコンテンツに、マウスポインターまたは挿入ポイントを合わせます。

2. ツールヒント Widget の青いタブをクリックして選択します。

3. ツールヒント Widget のプロパティインスペクターで、必要に応じてオプションを設定します。

名前

ツールヒントコンテナの名前です。このコンテナにツールヒントのコンテンツが格納されます。Dreamweaver の初期設定では、div タグがコンテナとして使用されます。

トリガー

ページ上の、ツールヒントをアクティブにするエレメントです。Dreamweaver の初期設定では、span タグで囲んだプレースホルダーテキストがトリガーとして挿入されますが、固有の ID を持つものであればページ上の任意のエレメントをトリガーとして選択できます。

マウスに追従

このオプションをオンにすると、トリガーエレメントの上に置かれたマウスの動きにツールヒントが追従します。

マウスアウトで非表示

このオプションをオンにすると、マウスがツールヒントに重なっている間は（たとえトリガーエレメントから出ても）ツールヒントが表示され続けます。ツールヒント内にリンクなどのインタラクティブなエレメントがある場合は、ツールヒントを開いた状態にすると便利です。オフにすると、ツールヒントはマウスがトリガー領域から出た時点で閉じられます。

水平方向のオフセット

ツールヒントの水平位置をマウスとの相対位置で指定します。オフセット値はピクセル単位で、初期設定は 20 ピクセルです。

垂直方向のオフセット

ツールヒントの垂直位置をマウスとの相対位置で指定します。オフセット値はピクセル単位で、初期設定は 20 ピクセルです。

表示時の遅延

マウスがトリガーエレメントの領域に入ってからツールヒントが表示されるまでの遅延時間をミリ秒で指定します。初期設定値は 0 です。

非表示の遅延

マウスがトリガーエレメントの領域から出てからツールヒントが表示されなくなるまでの遅延時間をミリ秒で指定します。初期設定値は 0 です。

効果

ツールヒントを表示する際に使用する効果のタイプです。「ブラインド」では、ツールヒントが窓のブラインドのように上下に動いて現れたり隠れたりします。「フェード」では、ツールヒントがフェードインおよびフェードアウトします。初期設定値は「なし」です。