Excellent work! I’m putting this to use

My application I’m using this in (annotating medical images) may require a user to choose which direction the tail extends. Would I be right in assuming that if I modify Callout.as/commitProperties() to not evaluate the tail position – essentially comment out

for each (var proposedTailPosition:String in tailPositionOrder) {…}

and modify

actualTailPosition = null;

to be

actualTailPosition = preferredTailPosition;

that the tail position would *always* be the preferred one?

Thanks,

Adam

I like it! Great job!

Hi Aaron, this is a great little script. I noticed it doesn’t have an explicit license, and I was interested in using it in my project but just wanted to make sure it was okay. It would be great if it were MIT or BSD-style licensed. Thanks!

Hi,

Maybe a stupid question but how can you easily show and hide the tooltip?

For example onmouseover => show
onmouseout => hide

I dont get directly how to hide the callout you just created.
How can I access the one which is just created?

Because if I use callout.hide() then the callout variable should be a variable visible for
the whole application?

I m just starting with flex so maybe there is a really easy solution?

thx for the component!

Thanks Aaron! I’m currently using it as a callout for cells of a DataGrid. I had to modify it to be able to use a separate regular DisplayObject (instead of a DisplayObjectContainer) as an ‘owner’ in order to reliably calculate the correct dimensions from an ItemRenderer, but it’s working quite well. The project isn’t ready and is sort of niche, but when it’s public I will let you know. Thanks again.

Thx Aaron,

Ok I got it. That was the first thing I tried and it works …

but I was trying to achieve the following:

create a showCallout(event:Event , text:String) method to create callouts so I just have to give the
text I want to show within the callout.

onMouseOver=”showCallout(event,’This is my help text in the callout’)”

And then later on

on click=”hideCallout(//name of the callout//);”

But then when I use multiple callouts, I cant use the hide method anymore
because I dont know the name of the callout to hide?

Or is it not a problem to use a different variable for every callout I want
to make on a screen? It sounds a bit overkill no? Because mostly the things
that change are the text and the component where the callout is shown?

So imagine that I want to create hundred callouts on one screen?
What would be the best approach to create them and to hide them seperatly?

thx

Hi Aaron, great plugin! I am having an issue where the callout is placed off-stage a little the first time it is displayed, then the next time it is placed appropriately. I am weeding through the code, but I am new to Flex / AS3 so it is a little Greek to me.

My callout is about 320px x 200px most of the time at it’s largest size.

Is there a place I can tweak or fix that? We are developing a cool mapping app, I will post up a link once it goes live.

Thanks!
Chad

OK, I think I figured it out. Basically I am using htmlText on my lables and text fields and the getExplicitOrMeasuredHeight() is not able to accurately calculate the height of the callout if there are line breaks () in the html…

So I did a little workaround and added some height to the callout if it was under a certain height and it seems to work well now!

Thanks again! I will post up a link once the project goes live!

Firstly, and importantly, thanks Aaron for the great code.

I have just started with Flex/AS3 and am creating a little AIR app. I am using your code to pop-out tips within a custom TextArea class but I am getting a compile error on “DisplayObjectContainer” to remove this I had to “import flash.display.DisplayObjectContainer” … I dont quite understand why I had to do this but your examples didnt which is confusing.

But also, now when I run the app, it crashes on the “callout.show( DisplayObjectContainer( urlCurrentlyOver.target ) );” method call.

The “urlCurrentlyOver” above is my own utility object for storing the values of a mouse event and the propert “.target = mousevent.target” so this should work evaluate to the same thing as your examples.

The error I get is “Type Coercion failed: cannot convert mx.core::UITextField@810a0b1 to flash.display.DisplayObjectContainer.”

I understand you may not have enough code, but perhaps you may know what I have done wrong.

Thanks in advance.

Also, is there any way it can be styled like a Windows InfoTip which has a slight gradient background, black border and drop shadow (e.g. http://nick.typepad.com/blog/2008/12/coming-in-feedd.html)

Hi Aaron,

First of all i must appreciate your work.Great job done.This has definately lessend my work but i am stuck in between.

I am creating a real time location system where in alarms(which are small images as icons)come on images(say floorplan) and i want to show callouts on alarms at runtime.
They work perfectly uptill this point.But now when i scroll down the image,the alarm moves but the callout remain at the initial position(i.e it does not move when i scroll up and down).

Also why is it that i can only show callouts at POPUp.Cant i add it as a child on any container so that it comes in my container instead of stage.

Is there any way to get this going.I am really stuck.

awesome work! one problem I’m having: when I go to another state, the callouts are still there. How to autoclose on leaving a state or viewstack?

gracias!

Great code… This is what I’ve been needing for a while now.

Small problem that I’m not sure how to fix:
If you use the Callout on an object (let’s say a button) that is inside of a TitleWindow or Panel, the Callout’s position is off by the height of the Panel’s header. So the Callout is 20+ pixels above the button. Any ideas?

Thanks!

Awesome! I love it when someone maintains their code & pays attention to their blogs.

Thanks for the fix.

Simple. Awesome.

Aaron

Hey this is great stuff.

If anyone wants to add a drop shadow, here is what I did…

in Callout.as updateDisplayList method add the following…

            //shadow
            var filter:BitmapFilter = getBitmapFilter();
            var myFilters:Array = new Array();
            myFilters.push(filter);
            filters = myFilters;

now, also in Callout.as add this method to the class…

        private function getBitmapFilter():BitmapFilter {
          var color:Number = 0x000000;
          var angle:Number = 45;
          var alpha:Number = 0.6;
          var blurX:Number = 8;
          var blurY:Number = 8;
          var distance:Number = 3;
          var strength:Number = 0.65;
          var inner:Boolean = false;
          var knockout:Boolean = false;
          var quality:Number = BitmapFilterQuality.HIGH;
          return new DropShadowFilter(distance, angle, color, alpha, blurX, blurY, strength, quality, inner, knockout);
        }

Obviously, you can change the values and tailor towards your needs. This creates a seamless drop-shadow around the tail (tailSkin) and the content area (bubbleSkin). There are some performance considerations that you might want to read up on the DropShadowFilter docs. This does not create a rectangular dropshadow, so it is more ‘expensive’ to draw out. But again, seems to work for me. Caution to all internet posted code.

I had some problems when using htmlText and getting the tool tip to resize properly – The solution is found on this blog http://idletogether.com/automatically-resize-texttextarea-based-on-content-autosize-in-flex/ – just use Text instead of TextArea (unless you just want a text area) and may have to set a fixed width to make sure it wraps properly

Aaron,

Have you ported this to Flash 4?

Tom

Hi,

I’m new to Flex and have been playing around with the callout sample, using it for tooltips. I have one question about it though. How do you set the callout item to appear at your current mouse coordinates?

Thanks for the reply.
I have tried setting the anchorPoint property to my current mouse pointer x and y.
For some reason I keep getting some random results. Sometimes it displays the tip exactly on the mouse coordinates, but other times its far to the right of my pointer.
Any ideas?

I draw sprites on the screen and add a EventListener to each.
Then I have the callout with 2 labels on it.
Here is the code I use.

sprObject.addEventListener(MouseEvent.ROLL_OVER, onOver);
sprObject.addEventListener(MouseEvent.ROLL_OUT, onOut);
 
private function onOver(event:MouseEvent):void {
	var list:XMLList = XMLData.children();
 
	for each (var itemList:XML in list)
	{	
		if (event.target.name.toString() == itemList.name.toString()) {
			break;
		}
	}
 
	var strName:String = itemList.name.toString();
	var strActive:String = itemList.active.toString();
 
	showToolTip(strName ,strActive, event);
 
}
 
private function showToolTip(strText:String,strText2:String,event:MouseEvent):void
{
	var selectPoint:Point = localToGlobal(new Point(event.stageX, event.stageY));
 
	callout = new Callout();
	var contentBox:VBox = new VBox();
	contentBox.setStyle("horizontalAlign", "center");
	contentBox.setStyle("backgroundColor", 0xD3D3D3);
	contentBox.setStyle('borderStyle', 'solid');
	contentBox.setStyle("bordercolor", 0x000000);
	contentBox.setStyle("borderThickness", 2);
 
	var contentLabel:Label = new Label();
	contentLabel.text = "Block - " + strText;
	contentLabel.setStyle("color", 0xff0000);
 
	var contentLabel2:Label = new Label();
	contentLabel2.text = strActive;
	contentLabel2.setStyle("color",  0x00FF00);
 
	contentBox.addChild(contentLabel);
	contentBox.addChild(contentLabel2);
	callout.content = contentBox;
	callout.anchorPoint = new Point(selectPoint.x, selectPoint.y);
	callout.show(DisplayObjectContainer(event.target));				
 
}

I have remove the localToGlobal part and is using the stageX and Y fom the mouse. But unfortunately I’m still getting the same result. For some of my points the mouse pointer is correct – but for others it shows to the top right.

Just more information about what I’m doing.
I draw sprites on a , when I move my mouse over a specific sprite I need some information displayed in the tooltip.

Awesome, Thank you for all your help. That change worked 100%

This is just what I need! Thank you.