ToolTipのスタイルをクラスセレクタで分けて使う

こっちに出すToolTipはこのスタイルで、あっちのはまた別のスタイルで。ということをやろうと思ったら、ちょっとだけ回り道しないといけないみたいだったのでメモ。(実は回り道しなくてもできるのかもしれないが……)

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
					   xmlns:s="library://ns.adobe.com/flex/spark" 
					   xmlns:mx="library://ns.adobe.com/flex/mx">
	<s:layout>
		<s:HorizontalLayout/>
	</s:layout>
	
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
		
		mx|ToolTip.black {
			background-color: #000000;
			color: #FFFFFF;
		}
		mx|ToolTip.red {
			background-color: #FF0000;
			color: #FFFFFF;
		}
	</fx:Style>
	
	<fx:Script>
		<![CDATA[
			import mx.controls.ToolTip;
			import mx.events.ToolTipEvent;
			
			private function setStyleName(event:ToolTipEvent, styleName:String):void {
				if (!styleName) {
					return;
				}
				var tip:ToolTip = new ToolTip();
				tip.styleName = styleName;
				event.toolTip = tip;	//クラススタイルを指定したToolTipを渡す
			}
		]]>
	</fx:Script>
	
	<s:Button label="1" toolTip="hoge" toolTipCreate="setStyleName(event, 'black')" />
	<s:Button label="2" toolTip="hogehoge" toolTipCreate="setStyleName(event, 'red')" />
</s:WindowedApplication>

マウスオーバーになってからToolTipが表示されるまでの時間を変更する場合は、

ToolTipManager.showDelay = 200;   //ミリ秒

と書く。

コメントを残す