An IInputMode that detects when the mouse hovers over the CanvasComponent and displays a tooltip.
Remarks
In order to make use of this instance one has to register with the query-tool-tip event. Setting a custom validHoverLocationHitTestable will restrict the area where a tooltip can be shown.
This mode is exclusive by default.
The tooltip HTML element is positioned using "position: absolute". It is therefore positioned with respect to it's offset parent, which is the closest ancestor with "position: relative". In summary, for the tooltip to work properly, the element containing the graph component must be styled with "position: relative".
The tooltip element is using the yfiles-tooltip CSS class and provides additional classes for the enter and leave phase of the element.
Examples
Typically the ToolTipInputMode is installed as child mode of a GraphEditorInputMode or GraphViewerInputMode and can be retrieved from the toolTipInputMode property.
const toolTipInputMode = mode.toolTipInputModeIt is recommended to configure the tooltip handling on the parent GraphEditorInputMode or GraphViewerInputMode instead of the ToolTipInputMode. This involves registering for the query-item-tool-tip event instead of the query-tool-tip event:
// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.toolTipItems = GraphItemTypes.NODE
// register a listener
mode.addEventListener('query-item-tool-tip', (evt) => {
if (evt.handled) {
// A tooltip has already been assigned -> nothing to do.
return
}
// We can safely cast here because we set ToolTipItems to only Node.
const hitNode = evt.item as INode
if (hitNode.labels.size > 0) {
// Show the text of the first label as tooltip.
evt.toolTip = hitNode.labels.get(0).text
// Indicate that the tooltip content has been set.
evt.handled = true
}
})Related Reading in the Developer's Guide
Type Details
- yFiles module
- view
Constructors
Creates a new instance using the provided optional text provider.
Parameters
A map of options to pass to the method.
- priority - number
- exclusive - boolean
- A value indicating whether this mode will be the only one running when it has the mutex. This option sets the exclusive property on the created object.
- enabled - boolean
- The enabled state of this input mode. This option sets the enabled property on the created object.
- validHoverLocationHitTestable - IHitTestable
- An IHitTestable that determines where the mouse may hover and a tooltip can be shown. This option sets the validHoverLocationHitTestable property on the created object.
- validHoverLocationCursor - Cursor
- The cursor to use when the mouse is at a valid hover location. This option sets the validHoverLocationCursor property on the created object.
- toolTipLocationOffset - Point
- The tooltip location offset in view coordinates. This option sets the toolTipLocationOffset property on the created object.
- toolTipParentElement - HTMLElement
- A custom parent element to which the tooltip is added as a child in the DOM. This option sets the toolTipParentElement property on the created object.
- duration - TimeSpan
- The duration to show the tooltip. This option sets the duration property on the created object.
- delay - TimeSpan
- The duration the mouse has to hover in one place to show a tooltip. This option sets the delay property on the created object.
- mouseHoverSize - Size
- The amount the mouse pointer has to move in order to hide the tooltip. This option sets the mouseHoverSize property on the created object.
- closeOnClick - boolean
- Whether the tooltip is closed when a click is performed over the tooltip. This option sets the closeOnClick property on the created object.
See Also
Properties
Gets the installed controller.
Gets or sets the duration the mouse has to hover in one place to show a tooltip.
Remarks
Gets or sets the duration to show the tooltip.
Remarks
Gets or sets the enabled state of this input mode.
Remarks
Gets or sets a value indicating whether this mode will be the only one running when it has the mutex.
Remarks
The value of this property will be delegated to the exclusive property of the controller.
If this mode is marked as exclusive and has the mutex, all other modes added to the same MultiplexingInputMode will be deactivated. Otherwise, it will always run concurrently with all other modes.
Gets or sets the amount the mouse pointer has to move in order to hide the tooltip.
Remarks
(10, 10).Retrieves the IInputModeContext this mode has been installed in.
Remarks
null if this mode is currently not installed. Use createInputModeContext to obtain a context that has this IInputMode as the inputMode.Gets the priority of this input mode.
Remarks
Implements
Gets or sets the tooltip location offset in view coordinates.
Remarks
Examples
// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.toolTipInputMode.toolTipLocationOffset = new Point(20, 20)See Also
Gets or sets a custom parent element to which the tooltip is added as a child in the DOM.
Remarks
By default this property is null, which means that the tooltip is added to the document.body.
When specifying some other element as parent, it must be assured that the element is currently visible (i.e. has no style with property display: none).
Gets or sets the cursor to use when the mouse is at a valid hover location.
Remarks
nullGets or sets an IHitTestable that determines where the mouse may hover and a tooltip can be shown.
Remarks
Methods
Adjust the calculated tooltip position.
Remarks
Parameters
A map of options to pass to the method.
- originalPosition - Point
- The calculated tooltip position relative to the document root
Returns
- ↪Point
- The adjusted tooltip location relative to the document root
See Also
Will be called to unconditionally cancel all ongoing edits.
Remarks
This will be called prior to the uninstalling of this instance and when other input modes temporarily acquire the mutex.
In order to stop an active input mode manually, client code should use the following idiom:
if (!mode.tryStop()) {
mode.cancel()
}Implements
Creates an IInputModeContext for use with the query-tool-tip event for the upcoming text query operation.
Returns
- ↪IInputModeContext
- An instance of IInputModeContext.
Finds the position in canvas view coordinates to display the tooltip for the given world coordinates.
Remarks
Parameters
A map of options to pass to the method.
- location - Point
- The position in world coordinates.
Returns
- ↪Point
- The position in view coordinates.
See Also
Installs this mode into the given context that is provided by the canvas.
Remarks
In general a mode can only be installed into a single canvas at all times.
This method is called to initialize this instance. Subclasses should override this method to register the corresponding event handler delegates for the various input events they need to register with.
Overriding implementations should call the base implementation first.
Parameters
A map of options to pass to the method.
- context - IInputModeContext
- The context that this instance shall be installed into. The same instance will be passed to this instance during uninstall. A reference to the context may be kept and queried during the time the mode is installed.
- controller - ConcurrencyController
- The controller for this mode.
See Also
Implements
Called after cancel has been called.
Remarks
Can be overridden in subclasses to perform additional actions after the mode has been canceled.
This implementation does nothing.
Called after the active property of the installed ConcurrencyController has been set to true.
Remarks
Can be overridden in subclasses to perform additional actions after the mode has been activated.
Overriding implementations should call the base implementation.
Called after the active property of the installed ConcurrencyController has been set to false.
Remarks
Can be overridden in subclasses to perform additional actions after the mode has been deactivated.
Overriding implementations should call the base implementation.
Raises the query-tool-tip event.
Parameters
A map of options to pass to the method.
- evt - QueryToolTipEventArgs
- The QueryToolTipEventArgs instance containing the event data.
Triggered when the mouse hovers over the given coordinates.
Remarks
content is null, this method will call getToolTipContent to query the content. If there is any content it will display the tooltip at the location returned by getToolTipLocation.Parameters
A map of options to pass to the method.
- location - Point
- The coordinates where the mouse is hovering to trigger this function.
- content - any
- The content to display in the tooltip. The default value is
null.
Returns
Called after tryStop has been called.
Remarks
Can be overridden in subclasses to perform additional actions after the mode has been stopped.
This implementation does nothing.
Shows the tooltip at the given location.
Parameters
A map of options to pass to the method.
- location - Point
- The location in the world coordinate system.
- content - any
- The content of the tooltip. If
null, getToolTipContent will be called to get the content.
Returns
Overridden to only return true if this instance does not currently have the input mutex.
Uninstalls this mode from the given context.
Remarks
This code should clean up all changes made to the canvas in the install method. After a mode has been uninstalled it can be installed again into the same or another canvas.
Overriding implementations should call the base implementation after their own code.
Parameters
A map of options to pass to the method.
- context - IInputModeContext
- The context to deregister from. This is the same instance that had been passed to install during installation.
Implements
Events
Occurs when this mode queries the tooltip for a certain query location.
Remarks
Examples
ToolTipInputMode. This involves registering for the query-item-tool-tip event instead of this event:// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.toolTipItems = GraphItemTypes.NODE
// register a listener
mode.addEventListener('query-item-tool-tip', (evt) => {
if (evt.handled) {
// A tooltip has already been assigned -> nothing to do.
return
}
// We can safely cast here because we set ToolTipItems to only Node.
const hitNode = evt.item as INode
if (hitNode.labels.size > 0) {
// Show the text of the first label as tooltip.
evt.toolTip = hitNode.labels.get(0).text
// Indicate that the tooltip content has been set.
evt.handled = true
}
})