DataTip Troubles
Today I had a resizable List (within a HDividedBox) that was bound to an ArrayCollection with the labelField, dataTipField and showDataTips set. Example code below:
1 2 3 4 5 6 7 8 | <mx:HDividedBox width="100%" height="100%"> <mx:List width="100%" height="100%" dataProvider="{ac}" dataTipField="description" labelField="name" showDataTips="true"/> <mx:VBox width="100%" height="100%"/> </mx:HDividedBox> |
You’re probably thinking “I’ve done this a million times before, so why is this important enough to blog about?” Why? WHY? Because I just spent more time than is necessary trying to figure out a semi-Flex bug where the dataTip wasn’t always showing.
The problem comes down to the fact that Tool Tips are set to only show when they are smaller than the row required to show their text. So if the row is resized or just plain smaller than the text object in the dataTipField text then that text just isn’t shown!
An actual bug for this problem is entered in JIRA, you can find that bug here. And in the discussion you can see that the bug was reassigned and closed. And yet my problem still exists because of the text size. What is the fix? Actually that was presented to me via Livedocs though I feel it wasn’t as obvious as I would have preferred.
“A flag that indicates whether dataTips are displayed for text in the rows. If true, dataTips are displayed. DataTips are tooltips designed to show the text that is too long for the row. If you set a dataTipFunction, dataTips are shown regardless of whether the text is too long for the row. ” ~ Livedocs
Based on the Livedocs the solution is simple, use the dataTipFunction rather than dataTipField.
Recap:
This is buggy.
1 2 3 4 5 6 7 8 | <mx:HDividedBox width="100%" height="100%"> <mx:List width="100%" height="100%" dataProvider="{ac}" dataTipField="description" labelField="name" showDataTips="true"/> <mx:VBox width="100%" height="100%"/> </mx:HDividedBox> |
This works as intended.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <mx:Script> <![CDATA[ private function listDataTipFieldFunction(item:Object):String { return item.description; } ]]> </mx:Script> <mx:HDividedBox width="100%" height="100%"> <mx:List width="100%" height="100%" dataProvider="{ac}" dataTipFunction="{listDataTipFieldFunction}" labelField="name" showDataTips="true"/> <mx:VBox width="100%" height="100%"/> </mx:HDividedBox> |
I know that is a bunch of extra code, but if it works it’s worth it.
Do you know how to always show the dataTip – even when the user is not dragging the thumb?
@tony, why would you want to show all data tips for a list even when the mouse isn’t over the itemrenderer? Seems to me that you should change the actual renderer if you are wanting to show more/less/custom data when the user doesn’t interact with the renderer.
It’s the golden rule – “the client is always right”. They want the user to see the value of the slider below the slider thumb at all times. I would just use a colored text box, but it has to be aligned with the thumb and move with it like the datatip.
Any code snippets would be appreciated
Thanks
Tony
Tony,
Didn’t know what component you were looking at. If you see my example component I am working off of the List. I couldn’t tell 100% what component you were using. There is a way to add this functionality, it takes some programming though
I would extend the component, and have a popup positioned to show the value. If the thumb’s position changes, watch for the move event and and move the popup connected to the thumb. Done.