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:
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 whenyfiles-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, whenyfiles-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 whenyfiles-tooltip-leave
is removed and removed when the CSS transition or animation ends. Thetransitionend
oranimationend
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;
}