How to Add Tooltips / Mouse Hover Effects

Displaying tooltips

The com.yworks.canvas.input.MouseHoverInputMode offers an easy way to provide ToolTips for graph items such as nodes or edges. The following example shows how to create and add a new MouseHoverInputMode to an existing GraphEditorInputMode: var nodeHoverMode:MouseHoverInputMode = new MouseHoverInputMode( myToolTip, myTextProvider ); mainInputMode.add(nodeHoverMode); myToolTip is a display object used for displaying a ToolTip. If myToolTip is null, a mx.controls.ToolTip instance will be used.
myTextProvider is a function with the signature function( context:IInputModeContext, location:IPoint ):String which will return a text dependent on the given location.

The class com.yworks.canvas.input.TooltipTextProviders provides convenience implementations of tooltip text provider functions. These determine whether graph items are found at the given location and return the text which is mapped to that item. The following example shows how to create and register such a mapper: /* Create a mapper and add a dictionary value */ var newDictionaryMapper:DictionaryMapper = new DictionaryMapper(); newDictionaryMapper.mapValue( node, "Text for this node" ); /* Add the dictionary to the graph */ (graphCanvasComponent.graph as DefaultGraph).mapperRegistry.addMapper( "node-description", newDictionaryMapper ); Alternatively, one will retrieve such a mapper from mapped attributes in a graphml file. See the knowledge base article Transfer of additional information between server and client for details. Basically, add a mapper attribute to the roundtrip handler: var rth:RoundtripHandler = new RoundtripHandler(graphCanvas, serviceName); rth.addMapperAttribute("node-description", attrName, GraphMLConstants.SCOPE_NODE, GraphMLConstants.TYPE_STRING); With such a mapper, TooltipTextProviders.getGraphItemMapperTextProvider(itemClass:Class, mapperKey:String):Function will be easy to use. To register an input mode for displaying ToolTips which use the above mapped text, all one has to do is to let TooltipTextProviders create a text provider which uses the before created mapper: /* Create the Function which will handle MouseHover text for Graph Nodes */ var nodeTextProvider:Function = TooltipTextProviders.getGraphItemMapperTextProvider( INode, "node-description" ); /* Create the input mode with that text provider, using a standard ToolTip */ var nodeHoverMode:MouseHoverInputMode = new MouseHoverInputMode( null, nodeTextProvider ); /* Add the input mode to the (previously) installed MainInputMode */ mainInputMode.add(nodeHoverMode);

For more flexibility, one can write a custom text provider. The text provider must have the signature function( context:IInputModeContext, location:IPoint ):String And return a String with the text to display at the given lovation (or null, if nothing should be displayed). See the knowledge base article How to find out which graph item is located at particular coordinates for details on how to determine which item can be found at the given location.

Node Hover Effects

For hover effects, the com.yworks.canvas.input.NodeEffectInputMode can be used, as demonstrated in the DOMTree demo. Normally, one has to extend this class with a custom implementation. The following methods can be overridden:

• protected function createOverlaySprite():Sprite: This method creates the overlay to draw the effect on. If not overridden, this method will return simply a new Sprite
• protected function drawOverlay( canvasObject:ICanvasObject, overlay:Sprite ):void This method has to be overridden to do the rendering. Its parameters are:
  • canvasObject: A canvas object that contains the current node as its userObject. This canvas object will usually extend Sprite.
  • overlay: The current overlay (created by createOverlaySprite()) to draw on.

NodeEffectInputMode uses mx.effects.Tween to allow animation effects on hovering and leaving. To make use of this, one has to register a Tween listener for hovering and one for leaving effects. A Tween listener is an Object which must define the onTweenUpdate(value:Object):void method and the onTweenEnd(value:Object):void method. The former method is invoked for each interval of the animation, and the latter is invoked just after the animation finishes and has to remove the overlay used for the effect. The value object will be a number between 0 and 1, representing the current interval of the animation. The increment for this number will be determined by a function, set on mouseOutEasingFunction. The following methods of NodeEffectInputMode have to be overridden to create an animated effect:

• createMouseOverTweenListener: Creates a Tween listener for the starting animation.
• createMouseOutTweenListener: Creates a Tween listener for the ending animation. Use this listener's onTweenEnd() method to remove the overlay Sprite.

For an example see the demo.domparser.DOMTreeInputMode which can be found in the source code demos shipped with yFilesFLEX.

How to determine hovered objects without the above input modes

For more flexibility, you can listen for the com.yworks.canvas.input.CanvasMouseEvent.CANVAS_MOUSE_MOVE event on the

GraphCanvasComponent and use canvas.getHits(stageX:Number, stageY:Number, useShape:Boolean = true):Array which returns an array with the canvas objects at the given coordinates to determine which graph items are currently being hovered.