User Interactivity
Add interactive features — tooltips, context menus, click handlers, graph search, and overview navigation — to yFiles applications.
Before Implementing
Always query the yFiles MCP for current API:
yfiles:yfiles_get_symbol_details(name="GraphEditorInputMode")
yfiles:yfiles_list_members(name="GraphEditorInputMode", includeInherited=true)
yfiles:yfiles_get_symbol_details(name="GraphOverviewComponent")
yfiles:yfiles_search_documentation(query="tooltips context menu")
Quick Start
// Tooltips
inputMode.addEventListener('query-item-tool-tip', (evt) => {
evt.toolTip = createTooltipContent(evt.item)
evt.handled = true
})
// Context menu
inputMode.addEventListener('populate-item-context-menu', (evt) => {
evt.contextMenu = [
{ label: 'Delete', action: () => inputMode.deleteSelection() }
]
})
// Overview
const overview = new GraphOverviewComponent('overviewDiv', graphComponent)
// Search with highlighting
graphComponent.highlights.clear()
graph.nodes.forEach(node => {
if (matches(node, searchText)) {
graphComponent.highlights.add(node)
}
})
Core Concepts
- Tooltips:
query-item-tool-tip event on inputMode, set evt.toolTip and evt.handled = true
- Context menus:
populate-item-context-menu event, assign evt.contextMenu array of { label, action } items
- Click events:
item-clicked, item-double-clicked, item-right-clicked on inputMode
- Graph search: Highlights manager + custom matching logic; use
graphComponent.highlights
- Overview:
GraphOverviewComponent for minimap navigation
- Selection events:
selection.item-added, selection.item-removed, current-item-changed
Note: Always use addEventListener (yFiles 3.0) instead of addListener (yFiles 2.6). The @yfiles/eslint-plugin rule @yfiles/replace-legacy-event-listeners enforces this and auto-fixes legacy patterns.
Additional Resources
references/examples.md — Tooltip with HTML content, conditional context menu items, search with highlighting, overview integration, click handlers, selection listenersreferences/reference.md — Event signatures, ToolTipInputMode options, context menu item format, GraphOverviewComponent API, highlight manager, selection API
Related Skills
/yfiles-init — Initial setup/yfiles-graphbuilder — Build graphs from data/yfiles-nodestyle-basic — Custom visuals for highlighting
1---2name: yfiles-interactivity3description: This skill should be used when the user asks to "add tooltips", "add a context menu", "implement graph search", "add an overview", "handle click events", "handle selection changes", or mentions "tooltip", "context menu", "search", "GraphOverviewComponent", "click handler", "selection changed", "hover effects", or "interactive features".4---56# User Interactivity78Add interactive features — tooltips, context menus, click handlers, graph search, and overview navigation — to yFiles applications.910## Before Implementing1112Always query the yFiles MCP for current API:1314```15yfiles:yfiles_get_symbol_details(name="GraphEditorInputMode")16yfiles:yfiles_list_members(name="GraphEditorInputMode", includeInherited=true)17yfiles:yfiles_get_symbol_details(name="GraphOverviewComponent")18yfiles:yfiles_search_documentation(query="tooltips context menu")19```2021## Quick Start2223```typescript24// Tooltips25inputMode.addEventListener('query-item-tool-tip', (evt) => {26 evt.toolTip = createTooltipContent(evt.item)27 evt.handled = true28})2930// Context menu31inputMode.addEventListener('populate-item-context-menu', (evt) => {32 evt.contextMenu = [33 { label: 'Delete', action: () => inputMode.deleteSelection() }34 ]35})3637// Overview38const overview = new GraphOverviewComponent('overviewDiv', graphComponent)3940// Search with highlighting41graphComponent.highlights.clear()42graph.nodes.forEach(node => {43 if (matches(node, searchText)) {44 graphComponent.highlights.add(node)45 }46})47```4849## Core Concepts5051- **Tooltips**: `query-item-tool-tip` event on `inputMode`, set `evt.toolTip` and `evt.handled = true`52- **Context menus**: `populate-item-context-menu` event, assign `evt.contextMenu` array of `{ label, action }` items53- **Click events**: `item-clicked`, `item-double-clicked`, `item-right-clicked` on `inputMode`54- **Graph search**: Highlights manager + custom matching logic; use `graphComponent.highlights`55- **Overview**: `GraphOverviewComponent` for minimap navigation56- **Selection events**: `selection.item-added`, `selection.item-removed`, `current-item-changed`5758**Note**: Always use `addEventListener` (yFiles 3.0) instead of `addListener` (yFiles 2.6). The `@yfiles/eslint-plugin` rule `@yfiles/replace-legacy-event-listeners` enforces this and auto-fixes legacy patterns.5960## Additional Resources6162- **`references/examples.md`** — Tooltip with HTML content, conditional context menu items, search with highlighting, overview integration, click handlers, selection listeners63- **`references/reference.md`** — Event signatures, `ToolTipInputMode` options, context menu item format, `GraphOverviewComponent` API, highlight manager, selection API6465## Related Skills6667- `/yfiles-init` — Initial setup68- `/yfiles-graphbuilder` — Build graphs from data69- `/yfiles-nodestyle-basic` — Custom visuals for highlighting
yWorks