Flex Examples
The following example shows how you can customize the appearance of a ToolTip in Flex 4 by overriding the ToolTip selector in an <fx:Style/> block, or using the StyleManager in ActionScript.
Full code after the jump.
The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/08/30/styling-tooltips-in-flex-4/ --> <s:Application name="Halo_ToolTip_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; mx|ToolTip { backgroundAlpha: 1.0; backgroundColor: black; color: white; cornerRadius: 0; fontSize: 24; } </fx:Style> <s:Button id="btn" label="Spark Button" creationComplete="btn.toolTip = mx_internal::VERSION;" horizontalCenter="0" verticalCenter="0" /> </s:Application>
View source is enabled in the following example.
Or you can set the ToolTip CSS declaration using ActionScript, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/08/30/styling-tooltips-in-flex-4/ --> <s:Application name="Halo_ToolTip_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" initialize="init();"> <fx:Script> <![CDATA[ private function init():void { var cssDecl:CSSStyleDeclaration = StyleManager.getStyleDeclaration("mx.controls.ToolTip"); if (!cssDecl) { cssDecl = new CSSStyleDeclaration("mx.controls.ToolTip"); } cssDecl.setStyle("backgroundAlpha", 1.0); cssDecl.setStyle("backgroundColor", "black"); cssDecl.setStyle("color", "white"); cssDecl.setStyle("cornerRadius", 0); cssDecl.setStyle("fontSize", 24); } ]]> </fx:Script> <s:Button id="btn" label="Spark Button" creationComplete="btn.toolTip = mx_internal::VERSION;" horizontalCenter="0" verticalCenter="0" /> </s:Application>
This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
why do we need this line?
creationComplete=”btn.toolTip = mx_internal::VERSION;”
instead of
toolTip = “mx_internal::VERSION;” ?
Can anybody explain. is there any advantage in doing so?
Bhaskar,
You could use
toolTip="{mx_internal::VERSION}", but that’d give you a compiler warning, so I set the value using ActionScript.Peter
Hi i want to change toolTip style like borderThickness or border color in run time for concret tooltip… but there are some problem all border and background dissapear when i in toolTipShown event try to apply those styles… can you help me
thanks a lot for the post. i made use of simple css class to style tooltip.
the tooltip border thing worked either,
border-alpha:0.8;
border-visible:true;
border-style:solid;
border-color:#555555;
corner-radius:6;
fontFamily: “Arial”;
fontSize: 12;
color: #FFFFFF;
backgroundColor: #000000;
thanks again for the information.
regards.
How style parts of the tooltip e.g. bold? I’m generating a tooltip in an itemrenderer for an datagrid, displaying the column name and then the value: I want to display the value bold…
public override function set data(value:Object):void
{
var dg:DataGrid = this.listData.owner as DataGrid;
var dataField:String = (dg.columns[this.listData.columnIndex] as DataGridColumn).dataField;
var toolString:String = “”;
for(var i:int = 0; i < dg.columns.length; i++)
{
var fieldName:String = (dg.columns[i] as DataGridColumn).dataField;
toolString = StringUtil.substitute("{0}{1}: {2}\n", toolString, fieldName, displayString(value[fieldName]));
}
this.toolTip = toolString;
super.data = value;
this.text = displayString(value[dataField]);
}
In 4.0.1 Premium FB the mx style declaration version of this example doesn’t work, but the script version does.
@Mark Robbins,
The namespace changed from “halo” to “mx”:
I’ll update the post above.
Peter