Tooltips

Tooltips are supported by both GraphEditorInputMode and GraphViewerInputMode.

The most convenient way to provide a tooltip text for a graph item is to use a handler for GraphEditorInputMode’s or GraphViewerInputMode’s query-item-tool-tip event:

// display tooltips for nodes
graphEditorInputMode.toolTipItems = GraphItemTypes.NODE
// register a listener
graphEditorInputMode.addEventListener(
  'query-item-tool-tip',
  (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) {
      // Setting the tooltip also sets the 'handled' property to 'true'
      eventArgs.toolTip = hitNode.labels.get(0).text
    }
  }
)

The toolTipItems property on GraphEditorInputMode and GraphViewerInputMode controls which items trigger the tooltip events when clicked. You can obtain a more specific distinction per item by setting a custom queryToolTipPredicate.

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

Further customizations can be done on the ToolTipInputMode. GraphEditorInputMode and GraphViewerInputMode trigger the query-item-tool-tip upon ToolTipInputMode’s query-tool-tip 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 the yfiles-tooltip CSS class. Using this CSS class, you can customize features like the background, border, margin, or font. For example, to style a tooltip with a light-gray background and a black border, you can use the following rules:

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

CSS Transition or Animation

You can use CSS transitions or animations to control how the tooltip element appears and disappears by leveraging different CSS classes that are applied during the enter and leave phases.

You can disable the transition or animation for either phase by not defining the related CSS classes, as explained in the following sections.

Enter Phase

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

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

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

Alternatively, you could also define a CSS animation, for example:

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

Leave Phase

The following CSS classes are applied when the tooltip leaves the DOM:

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

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

Alternatively, you could also define a CSS animation, for example:

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

Integrate Custom Components

You can fully customize the content displayed within a tooltip with the api:P_QueryItemToolTipEventArgs<TModelItem>.ToolTip property. Besides plain text string, you can also assign an HTMLElement, which will be directly inserted into the tooltip’s display area. This enables embedding rich HTML structures and integrating dynamically rendered components from third-party libraries like React, Vue, or Angular.

To embed a custom component, create a container div element, render your third-party component into this container, and then assign the container element to args.toolTip within your event handler.

For concrete examples, refer to the dedicated demos: React, angular, Vue.