To Customize Tooltip with Icon in Flex

“Customize” is a most popular option in TWaver, such as Node, Link, Attachment can be customized, even tooltip also can be customized. This topic will introduce how to use flex to customize a specific tooltip.

First I will show the final diagram:

Next I will introduce the function in detail. The characteristic of tooltip is that it will display when mouse move on the component, otherwise it will dispose when mouse move off components. So we can custom a tooltip component and then listenering a network mouse move event. If it has elements under the mouse, we can show the tooltip and set its location, otherwise will invisible it.


//code
this.network.addEventListener(MouseEvent.MOUSE_MOVE, function(e:MouseEvent):void
updateToolTip(e);
});

private function updateToolTip(e:MouseEvent):void {
    var element:IElement = network.getElementByMouseEvent(e, true, 5);
    if(lastElement == element){
        return;
    }
    lastElement = element;
    if(element is Link){
        var point:Point = network.getLogicalPoint(e);
        customTooltip.x = point.x - customTooltip.measuredWidth / 2;
        customTooltip.y = point.y - customTooltip.measuredHeight - 10;
        customTooltip.setText(element.getClient('message'));
        customTooltip.visible = true;
    }else{
        customTooltip.visible = false;
    }
}


now we can define a tooltip class extend canvas, then add the tooltip on network.topCanvas

//code
public class CustomToolTip extends Canvas {}


It doesn’t need any interaction and scrollbar in Tooltip, so we can set the following code:


public function CustomToolTip() {
    this.mouseEnabled = false;
    this.mouseChildren = false;
    this.horizontalScrollPolicy = ScrollPolicy.OFF;
    this.verticalScrollPolicy = ScrollPolicy.OFF;
    this.init();
}


The most important thing is how to paint tooltip. We need to add icon and text in tooltip, also need to calculate these location:


//code
var messageImage:Image = new Image();
messageImage.source =  new messageIcon();
messageImage.x = _hmargin;
messageImage.y = _vmargin;
this.addChild(messageImage);

_message = new Label();
_message.x = _hmargin + _iconWidth + _hgap;
_message.y = _vmargin;
this.addChild(_message);


Then we need to paint a graphic like tooltip. Tooltip consists of a rectangle and a triangle:


//code
var g:Graphics = this.graphics;
var lineWidth:Number = 1;
g.lineStyle(lineWidth, 0, 0.5, true, "normal", CapsStyle.ROUND, JointStyle.ROUND);
Utils.beginFill(g, 0xFFFFFF, 1, 0, 0, _width, _height, Consts.GRADIENT_LINEAR_EAST, 0xCCCCCC, 1);
g.drawRoundRect(lineWidth, lineWidth, _width - lineWidth * 2, _height - lineWidth * 2 - _arrowHeight, 10, 10);
g.moveTo(_arrowStart, _height - lineWidth - _arrowHeight);
g.lineTo(_arrowStart, _height);
g.lineTo(_arrowStart + _arrowWidth, _height - lineWidth - _arrowHeight);
g.endFill();
g.lineStyle(1, 0xFFFFFF);
g.moveTo(_arrowStart, _height - lineWidth - _arrowHeight);
g.lineTo(_arrowStart + _arrowWidth, _height - lineWidth - _arrowHeight);


By now, all customize things are done, we need to binding the tooltip text and element.


//code
link.setClient('message', '3333M');
customTooltip.setText(element.getClient('message'));


Download source code here: CustomTooltipDemo