C

ToolTipInputMode

Show Usages
An IInputMode that detects when the mouse hovers over the CanvasComponent and displays a tooltip.
ImplementsInheritance Hierarchy

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.

Getting the ToolTipInputMode from its parent input mode
const toolTipInputMode = mode.toolTipInputMode

It 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
  }
})

See Also

The CSS styling options for the tooltip are presented in detail in the section CSS Styling of the Tooltip Element .

Developer's Guide

Members

Show:

Constructors

ToolTipInputMode

()
Creates a new instance using the provided optional text provider.

Parameters

See Also

API
query-tool-tip

Properties

closeOnClick

: boolean
Gets or sets whether the tooltip is closed when a click is performed over the tooltip.
final

controller

: ConcurrencyController
protectedreadonly
Gets the installed controller.
protectedreadonlyfinal

delay

: TimeSpan
Gets or sets the duration the mouse has to hover in one place to show a tooltip.
The default is one second.
conversionfinal

duration

: TimeSpan
Gets or sets the duration to show the tooltip.
The default value is 3 seconds.
conversionfinal

enabled

: boolean
Gets or sets the enabled state of this input mode.
Clients can use this property to disable or reenable this instance. This will set the enabled property of the installed controller so a disabled instance should never try to acquire the input mutex.

exclusive

: boolean
Gets or sets a value indicating whether this mode will be the only one running when it has the mutex.

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.

final

mouseHoverSize

: Size
Gets or sets the amount the mouse pointer has to move in order to hide the tooltip.
The default is (10, 10).
conversionfinal

parentInputModeContext

: IInputModeContext
protectedreadonly
Retrieves the IInputModeContext this mode has been installed in.
The value will be null if this mode is currently not installed. Use createInputModeContext to obtain a context that has this IInputMode as the inputMode.
protectedreadonlyfinal

priority

: number
Gets the priority of this input mode.
The priority will influence the order in which the modes will be installed into the CanvasComponent. The lower the priority value, the earlier it will be installed. If two modes are using the same priority value, the first one to be registered will be installed earlier.
final

toolTipLocationOffset

: Point
Gets or sets the tooltip location offset in view coordinates.
The value of this property is used by getToolTipLocation in order to move the tooltip away from the mouse pointer. The default value is (12,24).
conversionfinal

Examples

// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.toolTipInputMode.toolTipLocationOffset = new Point(20, 20)

See Also

API
getToolTipLocation

toolTipParentElement

: HTMLElement
Gets or sets a custom parent element to which the tooltip is added as a child in the DOM.

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).

final

validHoverLocationCursor

: Cursor
Gets or sets the cursor to use when the mouse is at a valid hover location.
The default is null
conversionfinal

validHoverLocationHitTestable

: IHitTestable
Gets or sets an IHitTestable that determines where the mouse may hover and a tooltip can be shown.
The default value of this property is ALWAYS.
final

See Also

Developer's Guide

Methods

adjustTooltipPosition

(originalPosition: Point): Point
protected
Adjust the calculated tooltip position.
This default implementation of this method moves the tooltip into the visible area if it extends beyond the document bounds.
protected

Parameters

originalPosition: Point
The calculated tooltip position relative to the document root

Return Value

Point
The adjusted tooltip location relative to the document root

See Also

API
getToolTipLocation

cancel

()
Will be called to unconditionally cancel all ongoing edits.

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()
}

createInputModeContext

(): IInputModeContext
protected
Creates an IInputModeContext for use with the query-tool-tip event for the upcoming text query operation.

createToolTip

(): HTMLDivElement
protected
Factory method that creates the tooltip.

getToolTipContent

(location: Point): any
protected
Callback method that provides a text for the given location, a Promise<T> providing a text or null.
protected

Parameters

location: Point
The location to find a text for.

Return Value

any
A string, Promise<T> or null to indicate that no tooltip should be shown.

See Also

API
query-tool-tip, createInputModeContext

getToolTipLocation

(location: Point): Point
protected
Finds the position in canvas view coordinates to display the tooltip for the given world coordinates.
This method adds the toolTipLocationOffset after converting the given location to view coordinates.
protected

Parameters

location: Point
The position in world coordinates.

Return Value

Point
The position in view coordinates.

See Also

API
toolTipLocationOffset

hide

()
Immediately hides the tooltip.

install

(context: IInputModeContext, controller: ConcurrencyController)
Installs this mode into the given context that is provided by the canvas.

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

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

API
uninstall

onCanceled

()
protected
Called after cancel has been called.

Can be overridden in subclasses to perform additional actions after the mode has been canceled.

This implementation does nothing.

protected

onConcurrencyControllerActivated

()
protected
Called after the active property of the installed ConcurrencyController has been set to true.

Can be overridden in subclasses to perform additional actions after the mode has been activated.

Overriding implementations should call the base implementation.

protected

onConcurrencyControllerDeactivated

()
protected
Called after the active property of the installed ConcurrencyController has been set to false.

Can be overridden in subclasses to perform additional actions after the mode has been deactivated.

Overriding implementations should call the base implementation.

protected

onQueryToolTip

(evt: QueryToolTipEventArgs)
protected
Raises the query-tool-tip event.
protected

Parameters

evt: QueryToolTipEventArgs
The QueryToolTipEventArgs instance containing the event data.

See Also

Developer's Guide

onShow

(location: Point, content?: any): Promise<boolean>
protected
Triggered when the mouse hovers over the given coordinates.
If 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.
protected

Parameters

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.

Return Value

Promise<boolean>
A Promise<T> that resolves to true if the tooltip will be shown or to false if the tooltip will not be shown.

onStopped

()
protected
Called after tryStop has been called.

Can be overridden in subclasses to perform additional actions after the mode has been stopped.

This implementation does nothing.

protected

show

(location: Point, content?: any): Promise<boolean>
Shows the tooltip at the given location.

Parameters

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.

Return Value

Promise<boolean>
A Promise<T> that resolves to true if the tooltip will be shown or to false if the tooltip will not be shown.

tryStop

(): boolean
Overridden to only return true if this instance does not currently have the input mutex.

Return Value

boolean
true iff this instance does not own the mutex.

uninstall

(context: IInputModeContext)
Uninstalls this mode from the given context.

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

context: IInputModeContext
The context to deregister from. This is the same instance that had been passed to install during installation.

updateLocation

()
Updates the current tooltip location in the page.
Call this method to update the tooltip location when the content changes while it is open.
final

Events

'query-tool-tip'

: QueryToolTipEventArgs
Occurs when this mode queries the tooltip for a certain query location.
Handlers should set the toolTip property or set/respect the handled property accordingly.

Properties of

QueryToolTipEventArgs
context: IInputModeContext
Gets the context for the current event.
handled: boolean
writable
Gets or sets a value indicating whether this QueryToolTipEventArgs has been handled.
queryLocation: Point
Gets the query location in world coordinates.
toolTip: any
writable
Gets or sets the tooltip content to use.
toolTipAsync: Promise<any>
writable
Gets or sets a Promise<T> that provides the tooltip content to use.

Examples

It 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 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
  }
})

See Also

Developer's Guide