A tooltip manager class for the UI of the editor.

Note: Most likely you do not have to use the TooltipManager API listed below in order to display tooltips. Popular {@glink framework/architecture/ui-library UI components} support tooltips out-of-the-box via observable properties (see module:ui/button/buttonview~ButtonView#tooltip and module:ui/button/buttonview~ButtonView#tooltipPosition).

Displaying tooltips

To display a tooltip, set data-cke-tooltip-text attribute on any DOM element:

domElement.dataset.ckeTooltipText = 'My tooltip';
Copy

The tooltip will show up whenever the user moves the mouse over the element or the element gets focus in DOM.

Positioning tooltips

To change the position of the tooltip, use the data-cke-tooltip-position attribute (s, se, sw, n, e, or w):

domElement.dataset.ckeTooltipText = 'Tooltip to the north';
domElement.dataset.ckeTooltipPosition = 'n';
Copy

Disabling tooltips

In order to disable the tooltip temporarily, use the data-cke-tooltip-disabled attribute:

domElement.dataset.ckeTooltipText = 'Disabled. For now.';
domElement.dataset.ckeTooltipDisabled = 'true';
Copy

Instant tooltips

To remove the delay before showing or hiding the tooltip, use the data-cke-tooltip-instant attribute:

domElement.dataset.ckeTooltipInstant = 'true';
Copy

Styling tooltips

By default, the tooltip has .ck-tooltip class and its text inner .ck-tooltip__text.

If your tooltip requires custom styling, using data-cke-tooltip-class attribute will add additional class to the balloon displaying the tooltip:

domElement.dataset.ckeTooltipText = 'Tooltip with a red text';
domElement.dataset.ckeTooltipClass = 'my-class';
Copy

.ck.ck-tooltip.my-class { color: red }
Copy

Note: This class is a singleton. All editor instances re-use the same instance loaded by module:ui/editorui/editorui~EditorUI of the first editor.