I just published a new “Monkey Indexed Page” (see here if you don’t know what I’m talking about).
The page is a collection of good resources on tooltips.
Here is the main Monkey Index page.
Here is the tooltip page.
I think once I reach around 5 pages, I will create a new feed just for the Monkey Index, so I don’t have to post new blog entries just to announce a new page…but until then…oh well.
-Kyle
No Comments »
I recently had a request to help show an approach for creating a custom “speech bubble” tooltip.
Here is a sample that should help demonstrate the approach.
There are docs on creating custom tooltips and that is essentially what my sample is based upon:
http://livedocs.adobe.com/flex/3/html/help.html?content=tooltips_1.html
The next challenge was to customize the border. I mimicked what was described in the docs:
http://livedocs.adobe.com/flex/3/html/help.html?content=tooltips_1.html
The docs show you how to customize the tooltip border, but since my custom tooltip extends Panel instead, I need to use the skin for the Panel border.
(thus I am using mx.skins.PanelSkin) It is also useful to look at what the parent of that class is doing (mx.skins.halo.HaloBorder).
I basically stole the “tail drawing” bit from the tooltip skin though and just patched it on to the end of the drawBorder method in the PanelSkin.
You may want to make this more robust, but this is just the general approach. (Add logic to determine what side to draw the tail on, what color the tail should be, etc.)
This movie requires Flash Player 9
Download a zipfile containing the source to this sample.
Browse the source of this example.
Or continue into the blog entry to see the source:
Read the rest of this post»
13 Comments »
Here is a simple little demo that shows how to create, style and position a tooltip so it looks like an Error bubble.
This way you can have more than one visible Error Tip visible at once.
<?
xml version=
"1.0"?>
<mx:Application xmlns:mx=
"http://www.adobe.com/2006/mxml" styleName=
"plain" verticalAlign=
"middle" horizontalAlign=
"center">
<mx:Script>
<![CDATA[
import mx.controls.ToolTip;
import mx.managers.ToolTipManager;
private var errorTip:ToolTip;
private var myError:String;
private function validateEntryA(event:Object):void {
myError="Error A.";
errorTip = ToolTipManager.createToolTip(myError,event.currentTarget.x + event.currentTarget.width,event.currentTarget.y) as ToolTip;
errorTip.setStyle("styleName", "errorTip");
}
private function validateEntryB(event:Object):void {
myError="Error B.";
var pt:Point = new Point(event.currentTarget.x, event.currentTarget.y);
pt = event.currentTarget.contentToGlobal(pt);
errorTip = ToolTipManager.createToolTip(myError,pt.x + event.currentTarget.width,pt.y) as ToolTip;
errorTip.setStyle("styleName", "errorTip");
}
]]>
</mx:Script>
<mx:TextInput id="a" width="100" valueCommit="validateEntryA(event)"/>
<mx:VBox>
<mx:TextInput id="b" width="100" valueCommit="validateEntryB(event)"/>
</mx:VBox>
</mx:Application>
Hopefully this will be useful to some.
Here is a link to a Flex Builder 2.0.1 project (compiled with SDK hotfix2) containing a sample demonstrating the solution described above.
4 Comments »
Recent Comments