Using htmlText in a toolTip in flex

转载：http://www.axelscript.com/2008/02/29/using-htmltext-in-a-tooltip-in-flex/

My previous post was on using the dataTip in flex… the link is here:

CLICK HERE TO GO TO PREVIOUS POST

I’m talk briefly from time to time with Maikel Sibbald from holland, and I used his post on using tooltips and the customization of them… ( I loved the post Mike! ) Someone commented on my post about using dataTips in flex (link at top of this post)… the dataTip term comes from the attribute you give to the datagrid… “showDataTips” but it is in all reality a “ToolTip”. I just wnated to clear that up…

The second thing is, I wanted to kind of walk through how to accomplish the custom tool tip, and how to apply css, and use htmlText in your custom ToolTip.

First off, hopefully you know this, and are familiar with css in flex… it’s not quite html css, it’s compiled into the .swf file… and the the syntax is although similar, not quite the same…

First you have your style tag, and your css.

<mx:Style>
ToolTip{
font-family: arial;
font-size: 12px;
color: #000000;
background-color: #FFFFFF;
background-alpha: 0.85;
borderSkin: ClassReference(“MyToolTip”);
}
</mx:Style>


You will notice the odd attribute/value pair called “borderSkin:” the value of this maybe unlike anything you’ve ever seen in html css… thats because it is… You give this value the ClassReference(“MyToolTip”); which relates to a “MyToolTip.as” Class that I have in my Example, but this could very well be a “MyToolTip.mxml”…

You then want to create your custom Class, and you want to Extend your ToolTipBorder Class. You might originally think to extend the ToolTip Class, but that wouldn’t comply with the css tactics we are using here.

The next thing your going to want to do, is create a function that override’s the super()’s function updateDisplayList…

Within that class, your going to declare your toolTip from your parent…

var toolTip:ToolTip = (this.parent as ToolTip);

The ToolTip Class creates something called a textField that is a UITextField… I found this by rummaging through the original ToolTip Class… (not hard to find, just write something like and hold ctrl on the keyboard and click on the class… it should jump to the original documented class.
You are going to override this in the new function, and this is whats going to make the html text actually work.

var textField:UITextField = toolTip.getChildAt(1) as UITextField;

textField.htmlText = textField.text;

As you can see in the code, that Maikel creates this text field and goes from there calculating some padding for the htmlText.

var calHeight:Number = textField.height;
calHeight += textField.y*2;
calHeight += textField.getStyle(“paddingTop”);
calHeight += textField.getStyle(“paddingBottom”);

var calWidth:Number = textField.textWidth;
calWidth += textField.x*2;
calWidth += textField.getStyle(“paddingLeft”);
calWidth += textField.getStyle(“paddingRight”);

super.updateDisplayList(calWidth, calHeight);

Then last but not least your going to call your super.updateDisplayList method, and that will update and redraw your display.

As for where I come in… I was asked in my other post, on if you could put an image into the toolTip in flex… and the answer is ABSOLUTELY.

here is the html toolTip with the html Image, i’m working on making this more elegant, and creating a custom tool tip that accepts an image, but just am running short on time lately… I will return!

but if you hover over the button in the following link, you will see an html image show up in the tool tip, like i said this is not an elegant way of doing this, because you will have to statically set the width and height of your tooltip… if your okay with doing that, then this is a fine situation to do so… check it out

APPLICATION – SOURCE