Smart Tooltip-Class
15. May 2008 – 16:43…a smart/small tooltip-class
//smart tooltip 2008 by Jan Frischmuth (smart-page.net) package com.smart_page.ui{ import flash.display.Sprite; import flash.display.DisplayObjectContainer; import flash.geom.Point; import flash.text.TextFormat; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.text.StyleSheet; import flash.events.MouseEvent; import flash.filters.DropShadowFilter; /** @class tooltip * * @brief ui_widget: creates a fast to handle and customizeable tooltip * * usage: var mytooltip:tooltip=new tooltip(stage,{_ttstring:"mytooltiptext"}) * * - simply pass a DisplayObjectContainer where the tooltip should reside and * optional an object including as manay params as you want to set (see below). * * call showtt() / killtt() to show or remove a tooltip and settt(string) * to set it´s text (also calls showtt()). * * if param ttstring is empty or static / noevents are true, the tooltip * won´t be displayed until settt() or showtt() are called. */ public class tooltip extends Sprite { private const notextstring:String="<span style="color: #ff0000;">My </span><strong>god </strong> - <em>it´s </em><span style="text-decoration: underline;"><a href="#"><span>full of stars !</span></a></span>"; public var ttcontainer:Sprite; public var ttlabel:TextField; public var _ttstring:String=notextstring; public var _ttroot:DisplayObjectContainer; public var _tttarget:DisplayObjectContainer; public var _ttformat:TextFormat=new TextFormat("Arial",10,0x888888); public var _ttstyle:StyleSheet; public var _ttcolor:int=0xFFEFCC; public var _ttalpha:Number=1; public var _ttedge:int=5; public var _ttfilter:DropShadowFilter=new DropShadowFilter(3, 45, 0x000000, .5, 5, 5, 1, 1); public var _ttstatic:Boolean=false; public var _ttuserpoint:Point=new Point(0,0); public var _ttnoevents:Boolean=false; /** @param ttroot:DisplayObjectContainer; = (param): container to use as root. * * @param tttarget:DisplayObjectContainer; = {_tttarget:} container to use as target for listeners. * @param ttstring:String; = {_ttstring:} the text (html) - tooltip is not added to displaylist if empy. * @param ttformat:TextFormat = {_ttformat:} text type and format. * @param ttstyle:StyleSheet = {_ttstyle:} css-stylesheet for the tooltip. * @param ttcolor:int; = {_ttcolor:} backgroundcolor. * @param ttalpha:Number; = {_ttalpha:} backgroundalpha (be careful with black shadows when using ttalpha). * @param ttedge:int; = {_ttedge:} size for rounded edges. * @param ttfilter:DropShadowFilter = {_ttfilter:} shadow-filter. * @param ttstatic:Boolean; = {_ttstatic:} if true tooltip won´t move with mouse. * @param ttuserpoint:Point; = {_ttuserpoint:} user-defined x/y-pos. * @param ttnoevents:Boolean; = {_ttnoevents:} if true tooltip won´t register any eventlisteners and will stay invis. */ public function tooltip(ttroot:DisplayObjectContainer, o:Object=null, ...stuff) { _ttroot=ttroot; if (o!=null){ if (o._ttstring!=null) _ttstring=o._ttstring; if (o._ttformat!=null) _ttformat=o._ttformat; if (o._ttstyle!=null) _ttstyle=o._ttstyle; if (o._ttcolor!=null) _ttcolor=o._ttcolor; if (o._ttalpha!=null) _ttalpha=o._ttalpha; if (o._ttedge!=null) _ttedge=o._ttedge; if (o._ttfilter!=null) _ttfilter=o._ttfilter; if (o._ttstatic!=null) _ttstatic=o._ttstatic; if (o._ttuserpoint!=null) _ttuserpoint=o._ttuserpoint; if (o._ttnoevents!=null) _ttnoevents=o._ttnoevents; o._tttarget!=null ? _tttarget=o._tttarget :_ttnoevents=true; }else{ _ttnoevents=true; } if (!_ttnoevents) { _tttarget.addEventListener(MouseEvent.ROLL_OVER, showtt); if (_ttstatic) { _tttarget.addEventListener(MouseEvent.ROLL_OUT, killtt); } } this.visible=false; } //------- //methods //------- //create and show tooltip public function showtt(e:MouseEvent=null) { if (getChildByName("ttcontainer")!=null) killtt(); ttlabel = new TextField(); ttlabel.autoSize = TextFieldAutoSize.LEFT; ttlabel.selectable=false ; ttlabel.multiline=true; ttlabel.defaultTextFormat = _ttformat; ttlabel.styleSheet = _ttstyle; ttlabel.htmlText = _ttstring; ttcontainer=Sprite(this.addChild(new Sprite())); ttcontainer.name="ttcontainer"; ttcontainer.filters = [_ttfilter]; drawtt(); ttcontainer.addChild(ttlabel); _ttroot.addChild(this); if (_ttstatic) { this.x=_ttuserpoint.x+this.width/2; this.y=_ttuserpoint.y; } if (!_ttstatic && !_ttnoevents) { stage.addEventListener(MouseEvent.MOUSE_MOVE, moveme); _tttarget.removeEventListener(MouseEvent.ROLL_OVER, showtt); } this.visible=true; } //draw tooltip-background and adjust textfield public function drawtt():void { if (_ttedge<=0) _ttedge=1; var arroww:int=5; var ttw:int = ttlabel.textWidth; var tth:int = ttlabel.textHeight-_ttedge/2; var ttform:Array = [[-ttw/2, -arroww-_ttedge], [-ttw/2, 0], [-ttw/2+arroww, -arroww-_ttedge],[0, -arroww-_ttedge], [_ttedge, -arroww-_ttedge, _ttedge, -arroww-_ttedge*2], [_ttedge, -tth-_ttedge-arroww], [_ttedge, -_ttedge*2-tth-arroww, 0, -_ttedge*2-tth-arroww], [-ttw , -_ttedge*2-tth-arroww],[-ttw-_ttedge,-_ttedge*2-tth-arroww,-ttw-_ttedge,-_ttedge-tth-arroww],[-ttw-_ttedge,-arroww-_ttedge*2],[-ttw-_ttedge,-arroww-_ttedge,-ttw,-arroww-_ttedge]]; ttlabel.x=-ttlabel.width+_ttedge/2; ttlabel.y=-ttlabel.height-arroww-_ttedge; ttcontainer.graphics.clear(); ttcontainer.graphics.beginFill(_ttcolor, _ttalpha); ttcontainer.graphics.moveTo(ttform[i][0], ttform[i][1]); for (var i:int = 0; i < ttform.length; i++) { if (i > 0) { if (ttform[i].length < 4) { ttcontainer.graphics.lineTo(ttform[i][0], ttform[i][1]); } else { ttcontainer.graphics.curveTo(ttform[i][0], ttform[i][1], ttform[i][2], ttform[i][3]); } } } ttcontainer.graphics.endFill(); } //move tooltip on mousemove-event private function moveme(e:MouseEvent):void { if (_tttarget.hitTestPoint(stage.mouseX, stage.mouseY, true)) { //x-bounds if (Math.round(e.stageX+this.width/2) >= this.width && Math.round(e.stageX+this.width/2+_ttedge*2) <= stage.stageWidth) { this.x = Math.round(e.stageX+this.width/2-5); } else if (Math.round(e.stageX+this.width/2+_ttedge*2) <= stage.stageWidth) { this.x =this.width; } else if (Math.round(e.stageX+this.width/2) >= this.width) { this.x =stage.stageWidth-_ttedge*2; } //y-bound if (Math.round(e.stageY)>=this.height) { this.y = Math.round(e.stageY); } else { this.y = this.height; } } else { killtt(); } e.updateAfterEvent(); } //set tooltip-text and show public function settt(ttstring:String=notextstring):void { if (ttstring!=notextstring) { _ttstring = ttstring; } showtt(); } //remove tooltip and de/register events public function killtt(e:MouseEvent=null):void { if (!_ttnoevents) { stage.removeEventListener(MouseEvent.MOUSE_MOVE, moveme); _tttarget.addEventListener(MouseEvent.ROLL_OVER, showtt); } ttcontainer.graphics.clear(); removeChild(ttcontainer); _ttroot.removeChild(this); this.visible=false; } //update/redraw tooltip when already visible public function updatett(param:String=null):void { if (getChildByName("ttcontainer")!=null) { param =="redraw" ? drawtt() : showtt(); } } //--------------- //getters/setters //--------------- public function set ttstring(n_ttstring:String):void { _ttstring = n_ttstring;//(use settt()) } public function get ttstring():String { return _ttstring; } public function set ttroot(n_ttroot:DisplayObjectContainer):void { _ttroot = n_ttroot; updatett(); } public function get ttroot():DisplayObjectContainer { return _ttroot; } public function set tttarget(n_tttarget:DisplayObjectContainer):void { _tttarget = n_tttarget; updatett(); } public function get tttarget():DisplayObjectContainer { return _tttarget; } public function set ttformat(n_ttformat:TextFormat):void { _ttformat = n_ttformat; ttlabel.defaultTextFormat = _ttformat; ttlabel.htmlText = _ttstring; } public function get ttformat():TextFormat { return _ttformat; } public function set ttcolor(n_ttcolor:int):void { _ttcolor = n_ttcolor; updatett("redraw"); } public function get ttcolor():int { return _ttcolor; } public function set ttalpha(n_ttalpha:Number):void { _ttalpha = n_ttalpha; updatett(); } public function get ttalpha():Number { return _ttalpha; } public function set ttedge(n_ttedge:int):void { _ttedge = n_ttedge; updatett("redraw"); } public function get ttedge():int { return _ttedge; } public function set ttfilter(n_ttfilter:DropShadowFilter):void { _ttfilter = n_ttfilter; ttcontainer.filters = [_ttfilter]; } public function get ttfilter():DropShadowFilter { return _ttfilter; } public function set ttstatic(n_ttstatic:Boolean):void { _ttstatic = n_ttstatic; updatett(); }; public function get ttstatic():Boolean { return _ttstatic; }; public function set ttuserpoint(n_ttuserpoint:Point):void { _ttuserpoint = n_ttuserpoint; if (_ttstatic) { this.x=_ttuserpoint.x+this.width/2; this.y=_ttuserpoint.y } } public function get ttuserpoint():Point { return _ttuserpoint; } public function set ttnoevents(n_ttnoevents:Boolean):void { _ttnoevents = n_ttnoevents; updatett(); } public function get ttnoevents():Boolean { return _ttnoevents; } } }
Source and an example can be downloaded here.
