Customizing a Flex ToolTip instance’s appearance using styles at Flex Examples

Sep

Customizing a Flex ToolTip instance’s appearance using styles

By Peter deHaan

Categories: Styles and ToolTipManager Tags: toolTip.

The following example shows how you can customize the appearance of the Flex ToolTip using a <mx:Style /> block.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/01/customizing-a-flex-tooltip-instances-appearance-using-styles/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        ToolTip {
            backgroundColor: black;
            backgroundAlpha: 1.0;
            cornerRadius: 0;
            color: white;
        }
    </mx:Style>

    <mx:Button label="Roll over to see tool tip"
            toolTip="The quick brown fox jumped over the lazy dog." />

</mx:Application>

View source is enabled in the following example.

3 Responses to “Customizing a Flex ToolTip instance's appearance using styles”

Feed for this Entry View blog reactions

1 Steve Kwan Jan 23rd, 2008 at 11:43 am

Thanks! This was quite helpful. I was wondering if there was an easy way to style tooltips, and this is about as easy as it gets!
2 arisco97 Jun 23rd, 2008 at 11:18 am

Thanks. Does this apply automatically to validator error messages such as requiredFieldError, invalidCharError, and invalidNumberError. I have found that it doesn’t.
3 ajay kumar Dec 29th, 2008 at 2:08 pm

Hi,
This is good but i have need of to customize the background image of the tooltip.
if anyone has idea about it then plese tell me.

Thanks