Question

I have a dropdown in a table (as a custom renderer). Some of the options is too long to display in the table or dropdown as there is some space constraints on the screen. We do however have a tooltip that displays the full text.

The problem is that this is the last column in the table and the user’s PC has some resolution constraints as well. Now the tooltip displays and part of it is cut off on the users monitor.

Now I can go and adjust the X position (by -150) of the tooltip.

private function createToolTip(event:ListEvent):void {          
    tip = ToolTipManager.createToolTip("THE TEXT", this.parentApplication.mouseX - 150, this.parentApplication.mouseY) as ToolTip;                  
}

Now this works as expected but if the text is short it kind of dispays in the middle of no where.

So I added a width (of 200) to the tooltip

private function createToolTip(event:ListEvent):void {          
     tip = ToolTipManager.createToolTip("THE TEXT", this.parentApplication.mouseX - 150, this.parentApplication.mouseY) as ToolTip;
     tip.width = 200;                   
}

Now this displays ok with the text being displayed at least next to the dropdown.

But the problem is that whenever a text of longer than 200 is stored in the database it will not display the full text.

Does anyone know how to rather have the tooltip right aligned instead of left. That way no matter how long the text is it will display to the left.

Answer 1

Here is a solution which implements both singleline and multiline Tooltip with right alignment.

To do it you should make two steps: create your own Tooltip class and make the TooltipManager use it.

//Tooltip.as

package com.tooltip
{
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
import flash.text.TextFormatAlign;
import mx.controls.ToolTip;

public class MyToolTip extends ToolTip
{
    public var align:String = "left"; //left or right

    public function MyToolTip()
    {
        super();
    }

    override protected function commitProperties():void
    {
        super.commitProperties();
    }

    override protected function measure():void
    {
        super.measure();

        var tf:TextFormat = textField.getTextFormat();

        if (align == "right")
            tf.align = TextFormatAlign.RIGHT
        else
            tf.align = TextFormatAlign.LEFT;

        textField.setTextFormat(tf);
    }

    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
        super.updateDisplayList(unscaledWidth, unscaledHeight);

        textField.autoSize = TextFieldAutoSize.NONE;
        textField.width = this.width - 2*textField.x;
    }
}
}

The second step is not straightforward.

The TooltipManager has a property “toolTipClass” which says it which class should be used to create the Tooltip.

ToolTipManager.toolTipClass = MyToolTip;

There is an error in the SDK which prevents it from correct implementation. It has been discussed often in the network.

When a new Tooltip is created the “toolTipClass” is not taken in account. The respective code line looks like:

var toolTip:ToolTip = new ToolTip();

But should be like this one:

var toolTip:IToolTip = new ToolTipManager.toolTipClass();

The only way to correct this behaviour is to do monkey patching of the ToolTipManagerImpl class. It is described here very good.

Now you can use your tooltip in your application:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
xmlns:mx="http://www.adobe.com/2006/mxml" 
layout="absolute" 
minWidth="955" minHeight="600" >
<mx:Script>
    <![CDATA[
        import com.tooltip.MyToolTip;
        import mx.controls.ToolTip;
        import mx.managers.ToolTipManager;

        private const TOOLTIP_WIDTH:int = 200;

        protected function onBtnClick(event:MouseEvent):void
        {
            ToolTipManager.toolTipClass = MyToolTip;
            ToolTip.maxWidth = TOOLTIP_WIDTH;

            var tip:MyToolTip;

            tip = ToolTipManager.createToolTip("Your text", this.mouseX - 150, this.mouseY) as MyToolTip;

            tip.align = "right";
            tip.width = TOOLTIP_WIDTH;  
        }

    ]]>
</mx:Script>

<mx:Button id="myBtn" x="194" y="145" label="Show Tooltip" click="onBtnClick(event)"/>
</mx:Application>

It is very important to use both “width” and “maxWidth” properties.
To change the alignment to “left” use

tip.align = "left";

The sequence of lines in this code is important too.

I hope it will help you!

//EDIT

Here you can find the patched version of the ToolTipManagerImpl. Put it into your project’s root. The package name is the same like in the SDK, so the system will take this one instead.