Styling tooltips in Flex 4

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 www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see 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.

[GoogleAdsWide]

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.

7 thoughts on “Styling tooltips in Flex 4

  1. 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?

  2. 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

  3. 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.

  4. 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]);
    }

    1. @Mark Robbins,

      The namespace changed from “halo” to “mx”:

      xmlns:mx="library://ns.adobe.com/flex/mx"

      I’ll update the post above.

      Peter

Comments are closed.