StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow I add a tooltip for each item in a spark combo box
text
Body
copied!<p>I want to show tool tip on each item in Spark Combo-box.</p> <p>i use my own class for combox here is full code</p> <pre><code>package com.zigron.controls.extended.components </code></pre> <p>{ import com.zigron.controls.extended.skins.LabelTextInputSkin; import com.zigron.controls.extended.skins.comboBoxRegisterationSkin;</p> <pre><code>import flash.events.KeyboardEvent; import flash.ui.Keyboard; import mx.collections.ArrayCollection; import mx.collections.ICollectionView; import mx.collections.IList; import spark.components.ComboBox; import spark.components.RichEditableText; import spark.events.DropDownEvent; import spark.events.TextOperationEvent; public class LabelComboBox extends ComboBox { /** * By default, the match is from the beginning of the string only. * Set searchFromBeginning to false to search the entire string for a match. */ public var searchFromBeginning:Boolean = false; private var searchRegEx:RegExp; private var _prompt:String private var promptChanged:Boolean; private var _autoWidth:Boolean = true; public function LabelComboBox() { super(); this.setStyle("skinClass", comboBoxRegisterationSkin); addEventListener( DropDownEvent.OPEN, function (event:DropDownEvent ):void { if(dropDown) { if( textInput.text.length == 0 ) { ArrayCollection( dataProvider ).filterFunction = null; ArrayCollection( dataProvider ).refresh(); } if(autoWidth) { dropDown.width = scroller.horizontalScrollBar.explicitMaxWidth; } else { } if(dropDown.width < 100) { //dropDown.width = dropdownOriginalWidth; } } }); // Listen for key-up events to engage the filter //this.addEventListener( KeyboardEvent.KEY_UP, onKeyUp ); this.addEventListener( KeyboardEvent.KEY_DOWN, keyDownHandler); // Drop open the ComboBox this.openOnInput = true; } public function get autoWidth():Boolean { return _autoWidth; } public function set autoWidth(value:Boolean):void { _autoWidth = value; } override protected function keyDownHandler(event:KeyboardEvent):void { super.keyDownHandler(event); if( ( event.keyCode == Keyboard.BACKSPACE ) || ( event.keyCode == Keyboard.DELETE ) ) { if( textInput.selectionAnchorPosition <= 0 ) { textInput.text = ""; ArrayCollection( this.dataProvider ).filterFunction = null; ArrayCollection( this.dataProvider ).refresh( ); selectedIndex = -1; } } //adjustSelectionAndCaretUponNavigation(event); } override public function set dataProvider(value:IList):void { super.dataProvider = value; if( value is ICollectionView) { ( value as ICollectionView ).filterFunction = firstOnlyFilter; } } protected function firstOnlyFilter ( item:Object):Boolean { var label2 : String; try { if( labelField != "label" && ! ( item is String ) ) label2 = item[ labelField ]; else label2 = item.toString(); } catch(e:Error) { label2 = "Property not found " + labelField; } var len:int = textInput.selectionAnchorPosition > 0 ? textInput.selectionAnchorPosition:textInput.text.length; var fil:String = textInput.text.substr(0, len ); trace("fil, len, pos : ", fil, len, textInput.selectionAnchorPosition ); if( label2.toLowerCase().search( fil.toLowerCase() ) != -1 ) { return true; } return false; } override protected function textInput_changeHandler(event:TextOperationEvent):void { super.textInput_changeHandler( event ); if( dataProvider is ArrayCollection) { if( textInput.text.length == 0 ) ArrayCollection( this.dataProvider ).filterFunction = null; ( dataProvider as ArrayCollection ).refresh(); } } public function get prompt():String { return _prompt; } public function set prompt(v:String):void { if (_prompt != v) { _prompt = v; } } override protected function partAdded(partName:String, instance:Object):void { super.partAdded(partName, instance); if( ( instance is LabelTextInput ) && partName == "textInput" ) { trace(partName); //var instance = new LabelTextInput(); //( instance as LabelTextInput ).prompt = prompt; //( instance as LabelTextInput ).setStyle("skinClass", LabelTextInputSkin ); LabelTextInput(instance).prompt = prompt; } } /** Each time the user presses a key, filter the ComboBox items to match. */ private function onKeyUp( event:KeyboardEvent ):void { var textBox:RichEditableText = RichEditableText ( event.target ); var searchText:String = event.target.text; // Number or letter entered if ( isAlphaChar( event.keyCode ) ) { // Set up the search expression searchRegEx = new RegExp( textBox.text, 'i' ); // Filter the ArrayCollection ArrayCollection( this.dataProvider ).filterFunction = filter; ArrayCollection( this.dataProvider ).refresh( ); // Set the ComboBox's search text //textBox.text = searchText; //Select the current search text textBox.selectRange( searchText.length, searchText.length ); } if( searchText.length == 0 ) { selectedIndex = -1; } if ( event.keyCode == Keyboard.ESCAPE ) { textBox.text = ""; ArrayCollection( this.dataProvider ).filterFunction = null; ArrayCollection( this.dataProvider ).refresh( ); this.setFocus( ); } } /** The ArrayCollection filter function. Each item gets passed into this. */ private function filter( item:Object ):Boolean { var found:Boolean = false; // Determine if the search string is contained in the label of each ComboBox item if ( searchFromBeginning ) { if ( item is String ) { found = ( item.search( searchRegEx ) == 0 ); } else { found = ( String( item[ this[ "labelField" ] ] ).search( searchRegEx ) == 0 ); } } else { if ( item is String ) { found = ( item.search( searchRegEx ) >= 0 ); } else { found = ( String( item[ this[ "labelField" ] ] ).search( searchRegEx ) >= 0 ); } } return found; } /** Filter out any non-alphanumeric key strokes */ private function isAlphaChar( keyCode:int ):Boolean { var isAlpha:Boolean = false; if ( ( keyCode > 64 && keyCode < 91 ) || ( keyCode > 96 && keyCode < 123 ) //|| //( keyCode == Keyboard.BACKSPACE ) //|| //( keyCode == Keyboard.DELETE) ) { isAlpha = true; } return isAlpha; } } </code></pre> <p>}</p> <p>How do i set a property of tool tip and in which function that wherever i use this combo box the tool tip is appear.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload