documentationfor yFiles for HTML 3.0.0.1
SelectionContext Menus

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 : null
  if (hitNode && hitNode.labels.size > 0) {
    // Setting the tooltip also sets the 'handled' property to 'true'
    eventArgs.toolTip = hitNode.labels.get(0).text
  }
})
// 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:

  • yfiles-tooltip__container-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__container-enter: Initializes the start state of the tooltip. The class is added before the element is inserted into the DOM and removed immediately after the element is added to the DOM.
  • yfiles-tooltip__container-enter-to: Defines the end state of the tooltip. This class is added when yfiles-tooltip__container-enter is removed (i.e., immediately after the element enters the DOM), and it is removed when the CSS transition or animation ends.

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:

  • yfiles-tooltip__container-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 leave transition or animation ends.
  • yfiles-tooltip__container-leave: Initializes the beginning state of the tooltip as it leaves. The class is added when the leave phase begins and is removed immediately afterward, when yfiles-tooltip__container-leave-to is set.
  • yfiles-tooltip__container-leave-to: Defines the end state of the tooltip before it is removed from the DOM. This class is added when yfiles-tooltip__container-leave is removed and removed when the CSS transition or animation ends. The transitionend or animationend event also determines when the element is removed from 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;
}

SelectionContext Menus