Tooltips

Tooltips are supported by both GraphEditorInputMode and GraphViewerInputMode.

Most conveniently, a tooltip text for a graph item can be provided in a handler for GraphEditorInputMode’s or GraphViewerInputMode’s QueryItemToolTip event:

graphEditorInputMode.toolTipItems = GraphItemTypes.NODE
// register a listener
graphEditorInputMode.addQueryItemToolTipListener((src, eventArgs) => {
  if (eventArgs.handled) {
    // A tooltip has already been assigned => nothing to do.
    return
  }
  // We can safely assume a node here because we set toolTipItems to only NODE
  const hitNode = eventArgs.item ? eventArgs.item : null
  if (hitNode && hitNode.labels.size > 0) {
    eventArgs.toolTip = hitNode.labels.get(0).text
    // Indicate that the tooltip has been set.
    eventArgs.handled = true
  }
})
graphEditorInputMode.toolTipItems = GraphItemTypes.NODE
// register a listener
graphEditorInputMode.addQueryItemToolTipListener((src, eventArgs) => {
  if (eventArgs.handled) {
    // A tooltip has already been assigned => nothing to do.
    return
  }
  // We can safely assume a node here because we set toolTipItems to only NODE
  const hitNode = eventArgs.item ? (eventArgs.item as INode) : null
  if (hitNode && hitNode.labels.size > 0) {
    eventArgs.toolTip = hitNode.labels.get(0).text
    // Indicate that the tooltip has been set.
    eventArgs.handled = true
  }
})

The toolTipItems property on GraphEditorInputMode and GraphViewerInputMode controls for which items the tooltip events trigger when clicked. You can obtain a more specific distinction by overriding shouldQueryToolTip.

The actual work is done by the MouseHoverInputMode which is a child input mode for both GraphEditorInputMode and GraphViewerInputMode.

Further customizations can be done on the MouseHoverInputMode. GraphEditorInputMode and GraphViewerInputMode trigger the QueryItemToolTip upon MouseHoverInputMode’s QueryToolTip event. For customizations you can override the actual dispatching method, onQueryToolTip.

The validHoverLocationHitTestable specifies the area in which a tooltip will be queried.

Styling of the Tooltip Element

The basic styling of the tooltip element can be performed using with the yfiles-tooltip CSS class. By means of this CSS class features like background, border, margin or font can be customized, e.g. a tooltip with a light-gray background and a black border can be styled with the following rules:

.yfiles-tooltip {
  background-color: lightgray;
  border: 2px solid black;
}

CSS Transition or Animation

The tooltip element has different CSS classes during entering or leaving the DOM with which CSS transitions or animations can be defined.

The transition or animation can be disabled separately by not defining any of the related CSS classes which are explained in the following sections.

Enter Phase

The following CSS classes are present when the tooltip is added to the DOM:

yfiles-tooltip-entering This CSS class is present during the entire enter phase and can be used to define CSS transition or animation functions. It is removed when the enter transition or animation ends.
yfiles-tooltip-enter Initializes the start state of the tooltip. The class is added before the element is inserted in the DOM and removed just after the element was added to the DOM.
yfiles-tooltip-enter-to Defines the end state of the tooltip. This class is added when yfiles-tooltip-enter is removed, i.e. just after the element entered the DOM, and it is removed when the CSS transition or animation ends.

By default, yFiles comes with a simple fade transition for the enter phase of the tooltips:

.yfiles-tooltip-entering {
  transition: opacity 0.2s ease-in;
}
.yfiles-tooltip-enter {
  opacity: 0;
}
.yfiles-tooltip-enter-to {
  opacity: 1;
}

Alternatively, you could also define a CSS animation, e.g.

@keyframes fade {
  from { opacity: 0 }
  to { opacity: 1 }
}
.yfiles-tooltip-entering {
  animation: fade 0.2s ease-in;
}

Leave Phase

The following CSS are present when the tooltip leaves the DOM:

yfiles-tooltip-leaving This CSS class is present during the entire leave phase and can be used to define CSS transition or animation functions. It is removed when the enter transition or animation ends.
yfiles-tooltip-leave Initializes the beginning of the leave state of the tooltip. The class is added when the leave phase begins and is removed just a frame later, when yfiles-tooltip-leave-to is set.
yfiles-tooltip-leave-to Defines the end state of the tooltip before it is removed from the DOM eventually. This class is added when yfiles-tooltip-leave is removed and removed when the CSS transition or animation ends. The transitionend or animationend event also defines when the element is removed from the DOM.

By default, yFiles comes with a simple fade transition for the leave phase of the tooltips:

.yfiles-tooltip-leaving {
  transition: opacity 0.2s ease-out;
}
.yfiles-tooltip-leave {
  opacity: 1;
}
.yfiles-tooltip-leave-to {
  opacity: 0;
}

Alternatively, you could also define a CSS animation, e.g.

.yfiles-tooltip-leaving {
  animation: fade reverse 0.2s ease-out;
}

Selection Context Menus