« New Cairngorm Diagram | Main | CustomRowColorDataGrid Component »
ImageToolTip
| By Rich Tretola | September 29, 2006 | |
| 9,823 views |
This example shows how to create a custom tooltip that holds an image file and also allows you to edit the ToolTip properties. Enter your own image url and or adjust the properties. Roll over the binoculars icon to see the new tooltip.
Right Click on application to view & download Source Code.
Rich
Topics: Components, Flex 2, Tutorials | 6 Comments »
August 26th, 2008 at 8:34 am
Great app.
I’m struggling to try and alter the x/y position of the image tooltip as it defauts to be to the lower left of the mouse cursor (which if you have a large pictures pushes it off the screen).
Any ideas?
Thanks again
Reply to this comment
Rich Tretola Reply:
August 26th, 2008 at 9:03 am
Wow, it has been a while since I looked at this. Here is a link that might help:
http://blogs.adobe.com/flexdoc/2007/05/positioning_tooltips_1.html
However, the component that I created does not account for these properties. It relies on the framework for the positioning.
Reply to this comment
Mike Reply:
August 26th, 2008 at 7:38 pm
Thanks for getting back!
I have actually taken a lok at that one too, and yeah I se how the component doesn’t take into account the ToolTipManager properties.
I’ll keep working on it,
Thanks
Reply to this comment
Rich Tretola Reply:
August 26th, 2008 at 8:46 pm
Feel free to hack my sample. Please let me know if you get it working and post a link to the new source if you can.
August 27th, 2008 at 12:04 am
I was on a tight timeframe and wasn’t able to solve it unfortunately.
In the end I created a bit of a Frankenstein’s monster by triggered an image popUp function using ‘toolTipCreate’. It wasn’t exactly what I had in mind, but it gave the rollover/image popup feel.
My images paths are being loaded via XML (as the images themselves are always changing), so I used ‘event.target.source’ to load the correct images from the thumbnails.
If you get it to work please email me!
Thanks for your help,
Mike
————————-
Code Below:
private function imagePopUp(event:Event):void {
var img:Image = new Image();
var imageString:String = event.target.source;
img.addEventListener(MouseEvent.CLICK, img_click);
img.addEventListener(Event.COMPLETE, img_complete);
img.load(imageString);
PopUpManager.addPopUp(img, this, true);
}
private function img_complete(event:Event):void {
var img:Image = event.currentTarget as Image;
img.width = img.contentWidth;
img.height = img.contentHeight;
img.buttonMode = true;
img.useHandCursor = true;
img.toolTip = “Click image to close”
PopUpManager.centerPopUp(img);
}
private function img_click(event:MouseEvent):void {
var img:Image = event.currentTarget as Image;
PopUpManager.removePopUp(img);
}
Reply to this comment
Venkatesan M Reply:
July 6th, 2009 at 2:07 am
Hi all..
I am currently working on adobe flex 3.0. I have a requirement to make an image tooltip component. The requirements are as follows:
1)I have an image in my application(low resoultion one), say URL1.
2) when i mouse over it it should blow the same image in high resoultion, say URL2(i have both URL1 and URL2 with me) as a tooltip in a clear visible size,(say 300 X 300).
3) when i move my mouse out of it., i need the blow up to be closed
can any1 help me in doing this..
Thanks in advance.
Venkatesan M
Reply to this comment