Get Adobe Flash player

Smart Tooltip-Class

15. May 2008 – 16:43

Tags: , ,

Smart Tooltip-Class

…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 &amp;&amp; !_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&lt;=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 &lt; ttform.length; i++) {
				if (i &gt; 0) {
					if (ttform[i].length &lt; 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) &gt;= this.width &amp;&amp; Math.round(e.stageX+this.width/2+_ttedge*2) &lt;= stage.stageWidth) {
					this.x = Math.round(e.stageX+this.width/2-5);
				} else if (Math.round(e.stageX+this.width/2+_ttedge*2) &lt;= stage.stageWidth) {
					this.x =this.width;
				} else if (Math.round(e.stageX+this.width/2) &gt;= this.width) {
					this.x =stage.stageWidth-_ttedge*2;
				}
				//y-bound
				if (Math.round(e.stageY)&gt;=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.

Post a Comment

Security Code: