Blog of Cihan Polat

Um Bilder als ToolTips in Flex 3 zu benutzen gibt es einige dieser Möglichkeiten.
Hier stelle ich nun die vermutlich einfachste und eleganteste Weise vor:

Zu erst braucht man eine ImageToolTip Komponente. Dazu kann man die Build-In Klasse Image erweitern.
Indem man in der Komponente das Interface mx.core.IToolTip implementiert macht man die Klasse fit für den ToolTipManager.
Die implementierte setter Funktion bekommt vom ToolTipManager ein String übergeben. Dieser String ist der ursprüngliche ToolTip Text der angezeigt werden soll.

<mx:Button label="Test" toolTip="Dies ist ein Testbutton" />

In diesem Fall hätten wir einen einfachen ToolTip angezeigt bekommen mit dem Text  "Dies ist ein Testbutton".
Wenn wir nun dem ToolTipManager folgender Weise unsere ImageToolTip Komponente als standard ToolTip Klasse zuweisen, wird bei jedem ToolTip eine Instanz der ImageToolTip Komponente gebildet und der Text der toolTip Variable des Initiators der ImageToolTip Komponente durch die setter Funktion übergeben.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
applicationComplete="init()">

<mx:Script>
<![CDATA[

import mx.managers.ToolTipManager;

public function init() : void
{
ToolTipManager.toolTipClass = ImageToolTip
}
]]>
</mx:Script>
</mx:Application>

Diesen Ablauf können wir für unsere Zwecke ausnutzen, indem wir nun toolTip unsere Bilder URLs zuweisen.

<mx:Button label="Test" toolTip="http://www.google.de/intl/de_de/images/logo.gif" />

So sieht die ImageToolTip Komponente aus:

<?xml version="1.0" encoding="utf-8"?>
<mx:Image mouseEnabled="false" implements="mx.core.IToolTip" xmlns:mx="http://www.adobe.com/2006/mxml" maxWidth="350" maxHeight="350">
<mx:Script>
<![CDATA[
public function get text():String
{
return null;
}

public function set text(value:String):void
{
this.source = value;
}
]]>
</mx:Script>
</mx:Image>