1. ホーム
2. デベロッパーセンター
3. Flexデベロッパーセンター
4. Flex クイックスタート

Flex クイックスタート： 簡単なユーザインタフェースの作成

目次

• コントロールの使用
• コンテナの使用
• コンポーネントへのスタイルの適用
• エフェクトの追加
• ステートの作成
• ステートのトランジションの定義
• ツールヒントの使用
• カーソルの制御

---

ツールヒントの使用

Adobe® Flex™ のツールヒントを使用して、ユーザに役に立つ情報を提供することができます。 ユーザがマウスポインタをグラフィックコンポーネント上に合わせると、テキスト情報を含むツールヒントが表示されます。 ツールヒントを使用してアプリケーションの使用方法を説明したり、ツールヒントをカスタマイズしてその他の機能を実行することもできます。

UIComponent クラス（IToolTipManagerClient インタフェースを実装）を拡張する Flex のビジュアルコンポーネントはすべて、 toolTip プロパティをサポートします。 ■訳を後の文節にまとめました■ toolTip プロパティの値をテキスト文字列に設定すると、マウスポインタがそのコンポーネント上に移動したときにテキスト文字列が表示されます。

ツールヒントのテキストのサイズに制限はありませんが、長いメッセージは読みにくくなります。 ツールヒントのテキストがツールヒントボックスの幅より長くなると、テキストが次の行に折り返されます。 ツールヒントのテキストに改行を挿入することができます。 ActionScript では、 \n 改行文字を使用します。 MXML タグでは、 
 XML エンティティを使用します。

ツールヒントのテキストやボックスの外観を変更するには、CSS （Cascading Style Sheets）構文または mx.styles.StyleManager クラスを使用します。 ツールヒントのスタイルの変更は、現在のアプリケーションのすべてのツールヒントに適用されます。

例

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml"
    viewSourceURL="src/UsingTooltips/index.html"
    width="400" height="170"
>
    <mx:Style>
        ToolTip 
        {
            fontFamily: "Arial";
            fontSize: 19;
            fontStyle: "italic";
            color: #FFFFFF;
            backgroundColor: #33CC99;
        }
    </mx:Style>

    <mx:Panel 
        title="Using ToolTips" 
        toolTip="Child components without &#13; ToolTips will inherit this." 
    >    
        <mx:Form>    
            <mx:FormItem label="Button with tooltip:">
                <mx:Button label="Roll over me!" toolTip="You can click me too!" />        
            </mx:FormItem>

            <mx:FormItem label="Button without tooltip:">
                <mx:Button label="I'm unoriginal" />        
            </mx:FormItem>
        </mx:Form>
    </mx:Panel>    

</mx:Application>

結果

ソースを表示するには、Flex アプリケーションを右クリックして、コンテキストメニューから「ソースの表示」を選択します。

トップへ戻る

---

詳細情報

ツールヒントについて詳しくは、『Flex 2 Developer's Guide』の「Using ToolTips」を参照してください。

著者について