Flex 3 - 在自定義工具提示中使用html標籤的問題

Question

我使用自定義工具提示以便能夠使用html標籤。我使用的方法描述爲here。

我正在使用SDK v.3.5。
我也做了一些小技巧，以便TooltipManager.tooltipClass能夠正常工作（查詢this post瞭解更多詳情）。

這是一些代碼。

HtmlTooltip.as：

public class HtmlTooltip extends ToolTip 
{ 
    public function HtmlTooltip() 
    { 
     super(); 
     setStyle("borderColor", "0xF6F4F4"); 
    setStyle("shadowColor", "0xababab"); 
    setStyle("color", 'none'); 
    setStyle("fontWeight", 'normal'); 
    } 

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

    textField.htmlText = text; 
} 
} 

由我自定義一個替換默認的提示...

private function initializeTooltips() : void { 
     ToolTipManager.toolTipClass = HtmlTooltip; 

     ToolTipManager.showDelay = 750; 
     ToolTipManager.hideDelay = Infinity; 
    } 

TooltipsManager.as（這個類實例化提示，以獲得最終的造型）

public class TooltipsManager 
{ 
    private static var _customToolTip:HtmlTooltip; 
    private static var _onTooltip:Boolean = false; 
    private static var _onTarget:Boolean = true; 
    private static var _timerOn:Boolean = false; 
    private static const TIMER_DURATION:int = 1500; 

    public function TooltipsManager() 
    { 
    } 

    public static function showToolTipLeft(e:MouseEvent, text:String):void 
{ 
    removeTooltip('newTooltip'); 
    _onTarget = true; 

    var ptMouse:Point = new Point(e.currentTarget.mouseX, e.currentTarget.mouseY); 

    // Convert the targets 'local' coordinates to 'global' -- this fixes the 
    // tooltips positioning within containers. 
    ptMouse = e.currentTarget.contentToGlobal(ptMouse); 

    // Move tooltip below the target 
    var ptTarget:Point = new Point(e.currentTarget.x, e.currentTarget.y); 
    ptTarget = e.currentTarget.parent.contentToGlobal(ptTarget); 

    // Create tooltip and add mouseevents listeners   
    _customToolTip = ToolTipManager.createToolTip(text, ptMouse.x, ptMouse.y, "errorTipLeft") as HtmlTooltip; 

     _customToolTip.addEventListener(MouseEvent.MOUSE_OVER, customToolTipHandler); 
     _customToolTip.addEventListener(MouseEvent.MOUSE_OUT, customToolTipHandler); 

    // Move tooltip above target 
    _customToolTip.x = ptTarget.x - _customToolTip.width - 2; 
} 

/** 
* Remove tooltip if conditions fullfiled 
* Case 1: destruction is called after the countdown ends (=> not over target anymore), 
*   still have to check if mouse is over the tooltip 
* Case 2: destruction is called when mouseout from tooltip (=> not over tooltip anymore), 
*   still have to check if mouse is on target or if the timer is running 
* Case 3: destruction is called because new tooltip is to be created 
*/ 
private static function removeTooltip(from:String):void 
{ 
    if(_customToolTip != null 
     && ((from == 'timer' && !_onTooltip) 
      || (from == 'tooltip' && !_onTarget && !_timerOn) 
      || from == 'newTooltip')){ 
      ToolTipManager.destroyToolTip(_customToolTip); 
      _customToolTip = null; 
      _onTarget = _onTooltip = _timerOn = false; 
    }    
} 

/** 
* Launch TIMER_DURATION milliseconds timer 
* In some cases, the tooltip will contain clickable links, which wouldn't be able to be clicked 
* if the tooltip was destroyed just after a mouseout event from the target. 
* If after TIMER_DURATION milliseconds, the mouse is not over the tooltip, then it's destroyed. 
*/ 
    public static function launchTooltipTimer():void{ 
     _onTarget = false; 
     _timerOn = true; 
     setTimeout(timerOut, TIMER_DURATION); 
    } 

    private static function timerOut():void{ 
     _timerOn = false; 
     removeTooltip('timer'); 
    } 

    /** 
    * Handler for mouseevents from tooltip 
    * If the mouse is over the tooltip, it won't be destroyed. 
    */ 
    private static function customToolTipHandler(e:MouseEvent):void{ 
     switch(e.type){ 
      case MouseEvent.MOUSE_OVER: 
       _onTooltip = true; 
       break; 
      case MouseEvent.MOUSE_OUT: 
       _onTooltip = false; 
       removeTooltip('tooltip'); 
       break; 
     } 
    } 
} 

一切工作正常但2件事：

• 首先，字體顏色標記不起作用。如果我曾經使用過像<font color='0xadadad'>...</font>這樣的東西，它將無法工作。但是，如果我使用<u>...</u>，它工作正常
• 其次，<a href='...'>...</a>也不起作用。我檢查了幾個網站，解決方案是將文本的可選屬性設置爲true。這個竅門對我來說並不起作用，我不知道如何...

如果你需要更多的數據，我很樂意補充任何細節。您的建議非常歡迎:)

問候

Answer 1

我發現我的問題的第一部分，該解決方案的更多，所以這裏是以防萬一有人來翻過一樣PB：

當使用顏色屬性，而不是使用0X[hexa color code]只是使用＃[hexa color code]，它的工作原理！