Question

我在表格中有一个下拉列表（作为自定义渲染器）。由于屏幕上存在一些空间限制，因此某些选项太长而无法在表格或下拉列表中显示。但是，我们有一个显示全文的工具提示。

问题是这是表格中的最后一列，用户的PC也有一些分辨率限制。现在，工具提示显示，部分内容在用户监视器上被切断。

现在我可以调整工具提示的X位置（-150）。

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

现在这可以按预期工作，但如果文字很短，那么它就会出现在无处的中间。

所以我在工具提示中添加了宽度（200）

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

现在显示正常，文本至少显示在下拉列表旁边。

但问题是，只要数据库中存储的文本超过200，就不会显示全文。

有没有人知道如何将工具提示右对齐而不是左对齐。这样，无论文本多长，它都会显示在左侧。

Answer 1

这是一个解决方案，它实现了具有正确对齐的单线和多线工具提示。

enter image description here

要做到这一点，你应该做两个步骤：创建自己的Tooltip类并让TooltipManager使用它。

// 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;
    }
}
}

第二步并不简单。

TooltipManager有一个属性“toolTipClass”，它表示应该使用哪个类来创建工具提示。

ToolTipManager.toolTipClass = MyToolTip;

SDK中存在错误，导致无法正确实施。它已在网络中经常讨论。

创建新的工具提示时，不会考虑“toolTipClass”。相应的代码行如下所示：

var toolTip:ToolTip = new ToolTip();

但应该像这样：

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

纠正此行为的唯一方法是对ToolTipManagerImpl类进行猴子修补。它被描述为here非常好。

现在，您可以在应用程序中使用工具提示：

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

同时使用“width”和“maxWidth”属性非常重要。要将对齐方式更改为“左”，请使用

tip.align = "left";

此代码中的行序列也很重要。

我希望它会对你有所帮助！

<强> //修改

Here您可以找到ToolTipManagerImpl的修补版本。将它放入项目的根目录中。软件包名称与SDK中的名称相同，因此系统将采用此名称。

如何在Flex 3中右键对齐工具提示文本

1 个答案: