files/ja/archive/mozilla/xul/popupguide/tooltips/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

---
title: Tooltips
slug: Archive/Mozilla/XUL/PopupGuide/Tooltips
tags:
  - XUL
  - XUL Popup Guide
translation_of: Archive/Mozilla/XUL/PopupGuide/Tooltips
---
<p>
<span id="Tooltips"></span>
</p>
<h3 id=".E3.83.84.E3.83.BC.E3.83.AB.E3.83.81.E3.83.83.E3.83.97" name=".E3.83.84.E3.83.BC.E3.83.AB.E3.83.81.E3.83.83.E3.83.97">ツールチップ</h3>
<p>ツールチップは、マウスの下にあるコントロールについて説明するヘルプをユーザに提供するために使用されます。例えば、ツールバーボタンの上にマウスを動かして少し待つと、そのボタンの機能について説明するテキストが格納された小さなポップアップが表示されます。マウスを再び動かすと、ツールチップは消えます。ツールチップは、メインインターフェイスを複雑なものにすることなくユーザインターフェイスについての追加説明を提供する手段として便利です。
</p><p>ツールチップはマウスを使わないと表示させることができないので、他の方法で見ることのできない重要な情報は決して含まないように注意してください。
</p><p><span id="The_tooltiptext_attribute"></span>
</p>
<h4 id="tooltip_.E5.B1.9E.E6.80.A7" name="tooltip_.E5.B1.9E.E6.80.A7">tooltip 属性</h4>
<p>ほとんどの場合、ツールチップは 1 つのラベルのみを表示します。これは全ての XUL 要素に適用できる <code id="a-tooltiptext"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/tooltiptext">tooltiptext</a></code> 属性を使って可能になります。この属性の値にはツールチップに表示するテキストを設定します。
</p>
<pre>&lt;toolbarbutton label="Back" tooltiptext="Go back one page"/&gt;
</pre>
<p>この例では、ツールバー上の「戻る」ボタンにツールチップに表示するためのテキストを追加しています。これはツールバーがラベルを表示しないように設定されている場合にも便利でしょう。
</p><p>もしある要素が <code id="a-tooltiptext"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/tooltiptext">tooltiptext</a></code> 属性を持っておらず、その親要素が持っている場合、親のツールチップが適用されます。例えば次の例では、ツールバーにツールチップが設定されています。
</p>
<pre>&lt;toolbar tooltiptext="File Buttons"&gt;
  &lt;toolbarbutton label="Open" tooltiptext="Open a File"/&gt;
  &lt;toolbarbutton label="Close"/&gt;
&lt;/toolbar&gt;
</pre>
<p>「Open」ボタンには <code id="a-tooltiptext"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/tooltiptext">tooltiptext</a></code> 属性があるので、独自のツールチップを持っています。しかし、「Close」ボタンにはツールチップが付加されていませんが、親のツールバーには付加されています。このため、「Close」ボタンのうえにマウスが移動すると、ツールバーの空の部分と同じように、ツールバーのツールチップが適用されます。
</p><p>この例の「File Buttons」というツールチップテキストはあまり良いツールチップではありません。これはユーザに対して何も付加的な情報を伝えていないので、この例のような使い方はするべきではありません。
</p><p><span id="The_tooltip_element"></span>
</p>
<h4 id="tooltip_.E8.A6.81.E7.B4.A0" name="tooltip_.E8.A6.81.E7.B4.A0">tooltip 要素</h4>
<p>ツールチップは tooltip 要素を使って表示させる事もできます。これはポップアップの一種ですが、違った見た目を持っています。<code id="a-tooltiptext"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/tooltiptext">tooltiptext</a></code> 属性を使った要素は、内部のテキストに合った大きさの小さな黄色いボックスのような見た目を一般的に持つ、デフォルトの tooltip 要素の中にツールチップを表示します。このデフォルトのツールチップは自動的に作成されるので、普通は <code><a href="/ja/docs/Mozilla/Tech/XUL/tooltip" title="tooltip">tooltip</a></code> 要素を使う必要はありません。
</p><p>しかし、普通とは違った見た目を持っていたり、1 つのテキストラベルに加えて他の要素をサポートするツールチップを使う事も可能です。
</p><p>このツールチップは tooltip 要素を使って作成できます。tooltip 要素は、その内容をツールチップの中に表示します。
</p>
<pre>&lt;tooltip id="iconic"&gt;
  &lt;image src="help.png"/&gt;
  &lt;label value="Save a file to a remote site"/&gt;
&lt;/tooltip&gt;

&lt;button label="Save" tooltip="iconic"/&gt;
</pre>
<p>この例では、「iconic」という id のツールチップに画像とラベルが格納されています。<code id="a-tooltip"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/tooltip">tooltip</a></code> 属性によってボタンがそのツールチップに関連付けられています。tooltip 属性の値は tooltip 要素の id に設定しなければならず、この場合は「<code>iconic</code>」に設定しています。これによりこのツールチップが button 要素のツールチップとして表示されます。
</p><p>このように、要素にツールチップを設定するには、ラベルを表示するための <code id="a-tooltiptext"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/tooltiptext">tooltiptext</a></code> 属性を使う方法と、より複雑な内容を表示するための tooltip 属性を使うという 2 つの方法があります。ある要素が両方の属性を使っていた場合には、 tooltiptext 属性の方が使用され、デフォルトのツールチップが表示されます。
</p><p>もし tooltip 要素の中に何も要素が置かれなければ、tooltip 要素は標準のツールチップと同様にふるまい、表示されます。
</p><p>特殊なツールチップである tooltip 要素を使う場合には、その中のラベルはツールチップが適用される要素に基づいて変更されません。そのため、いくつかの要素に同じツールチップを使いたい場合には、ツールチップの内容をそれに応じて設定しなければなりません。popupshowing イベントリスナを使えば、必要に応じてツールチップを調節する事ができます。popupshowing イベントはツールチップが現れる直前に tooltip 要素で発生します。例えば、
</p>
<pre>&lt;tooltip id="iconic" onpopupshowing="this.lastChild.value = document.tooltipNode.label;"/&gt;
</pre>
<p>document の <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/tooltipNode">tooltipNode</a></span></code> プロパティは現在マウスが上に乗っている要素を保持します。この例では、マウスが上に乗っている要素の label を取得するためにこのプロパティが調べられています。そしてその label が tooltip の最後の子要素の value として設定されています。前の例では、tooltip の最後の子要素は label でした。こうすると、tooltip 内の label 要素の value が、マウスが上に移動した要素に基づいて変更されるようになります。
</p><p><span id="Tooltips_in_Trees"></span>
</p>
<h4 id=".E3.83.84.E3.83.AA.E3.83.BC.E3.81.AB.E3.81.8A.E3.81.91.E3.82.8B.E3.83.84.E3.83.BC.E3.83.AB.E3.83.81.E3.83.83.E3.83.97" name=".E3.83.84.E3.83.AA.E3.83.BC.E3.81.AB.E3.81.8A.E3.81.91.E3.82.8B.E3.83.84.E3.83.BC.E3.83.AB.E3.83.81.E3.83.83.E3.83.97">ツリーにおけるツールチップ</h4>
<p>ツリーは全体が単一の要素によって表示されるので、<code id="a-tooltip"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/tooltip">tooltip</a></code> 属性と <code id="a-tooltiptext"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/tooltiptext">tooltiptext</a></code> 属性はツリーの個々の行 (<span style="color: green;">row</span>)やセル (<span style="color: green;">cell</span>)には適用されません。しかし、ツリーは値が切り詰められたセルに対して自動的にツールチップを表示します。例えば、セルが長いラベルを持っており、そのラベルの長さよりも列 (<span style="color: green;">column</span>)が短ければ、そのセルの上にマウスが移動した時に、ユーザが全体の値を見られるようにツールチップが表示されます。
</p>
<div class="noinclude">
</div>