C

ToolTipInputMode

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

Remarks

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 GraphInputMode.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 GraphInputMode.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 with default values.

Parameters

Properties

controller

: ConcurrencyController
protectedreadonly
Gets the installed controller or null when this mode is not installed.
protectedreadonlyfinal

delay

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

duration

: TimeSpan
Gets or sets the duration to show the tooltip.
The default value causes the tooltip to stay open until the pointer moves away, or it gets dismissed.
conversionfinal

See Also

API
duration

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

isOpen

: boolean
readonly
Gets whether a popover is currently showing.
readonlyfinal

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
Gets 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 IInputModeContext.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 PopoverDescriptor.offset in view coordinates.
The value of this property is used to initialize the PopoverDescriptor.offset in order to move the tooltip away from the mouse pointer. The default value is (15,15).
conversionfinal

Examples

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

See Also

API
offset

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 opened.
The default value of this property is IHitTestable.ALWAYS.
final

See Also

Developer's Guide

Methods

addEventListener

(
type: string
listener: function(evt:EventArgs, sender:this): void
options?: ListenerOptions
)
Adds an event handler for a given event type.
final

Parameters

type: string
A string which represents the type of the event to register as listed in events.
listener: function(evt:EventArgs, sender:this): void
The function which will be invoked when the event is raised.
options?: ListenerOptions
Options which specify how the listener will be invoked.

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

close

()
Immediately closes the tooltip.

createInputModeContext

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

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 IInputMode.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 ConcurrencyController.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 invoke the base implementation.

protected

onConcurrencyControllerDeactivated

()
protected
Called after the ConcurrencyController.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 invoke 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.

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

open

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

Parameters

location: Point
conversion
The location in the world coordinate system.
content?: any
The content of the tooltip. If null, contents will be queried.

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.

openPopover

(popoverDescriptor: PopoverDescriptor): Promise<boolean>
protected
Actually opens the popover by forwarding the request to PopoverManager.open
protected

Parameters

popoverDescriptor: PopoverDescriptor
The descriptor for the popup.

Return Value

Promise<boolean>
A task that resolves to true when the popover is shown, to false when the popover will not be shown anymore.

removeEventListener

(
type: string
listener: function(evt:EventArgs, sender:this): void
options?: ListenerOptions
)
Adds an event handler for a given event type.
final

Parameters

type: string
A string which represents the type of the event to register as listed in events.
listener: function(evt:EventArgs, sender:this): void
The function which will be invoked when the event is raised.
options?: ListenerOptions
Options which specify how the listener will be invoked.

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 IInputMode.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 IInputMode.install during installation.

Events

'query-tool-tip'

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

Properties of QueryToolTipEventArgs

context: IInputModeContext
final
Gets the context for the current event.
handled: boolean
finalwritable
Gets or sets a value indicating whether this QueryToolTipEventArgs has been handled.
popover: PopoverDescriptor
final
Gets the popover descriptor.
queryLocation: Point
final
Gets the query location in world coordinates.
toolTip: any
finalwritable
Gets or sets the tooltip content to use.
toolTipAsync: Promise<any>
finalwritable
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 GraphInputMode.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