CKEditor Ecosystem Documentation
Search
Home/CKEditor 5/API
Class

TooltipManager (ui)

@ckeditor/ckeditor5-ui/src/tooltipmanager

class
See source

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 UI components support tooltips out-of-the-box via observable properties (see tooltip and tooltipPosition).

Displaying tooltips

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

domElement.dataset.ckeTooltipText = 'My tooltip';

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';

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';

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';

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

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

Filtering

Properties

  • readonly

    balloonPanelView : BalloonPanelView

    See source

    The instance of the balloon panel that renders and positions the tooltip.

  • readonly

    tooltipTextView : View

    See source

    The view rendering text of the tooltip.

  • private readonly

    _currentElementWithTooltip : HTMLElement | null

    See source

    Stores the reference to the DOM element the tooltip is attached to. null when there's no tooltip in the UI.

  • private readonly

    _currentTooltipPosition : String | null

    See source

    Stores the current tooltip position. null when there's no tooltip in the UI.

  • private readonly

    _pinTooltipDebounced : function

    See source

    A debounced version of _pinTooltip. Tooltips show with a delay to avoid flashing and to improve the UX.

Static properties

  • static

    defaultBalloonPositions : Object.<String, PositioningFunction>

    See source

    A set of default positioning functions used by the TooltipManager to pin tooltips in different positions.

  • private static

    _editors : Set.<Editor>

    See source

    An array of editors the single tooltip manager instance must listen to. This is mostly to handle EditorUI#update listeners from individual editors.

  • private static

    _instance : TooltipManager

    See source

    A reference to the TooltipManager instance. The class is a singleton and as such, successive attempts at creating instances should return this instance.

Methods

  • constructor( editor )

    See source

    Creates an instance of the tooltip manager.

    Parameters

    editor : Editor

  • destroy( editor )

    See source

    Destroys the tooltip manager.

    Note: The manager singleton cannot be destroyed until all editors that use it are destroyed.

    Parameters

    editor : Editor

    The editor the manager was created for.

  • private

    _onEnterOrFocus( evt, domEvent )

    See source

    Handles displaying tooltips on mouseenter and focus in DOM.

    Parameters

    evt : EventInfo

    An object containing information about the fired event.

    domEvent : Event

    The DOM event.

  • private

    _onLeaveOrBlur( evt, domEvent )

    See source

    Handles hiding tooltips on mouseleave and blur in DOM.

    Parameters

    evt : EventInfo

    An object containing information about the fired event.

    domEvent : Event

    The DOM event.

  • private

    _onScroll( evt, domEvent )

    See source

    Handles hiding tooltips on scroll in DOM.

    Parameters

    evt : EventInfo

    An object containing information about the fired event.

    domEvent : Event

    The DOM event.

  • private

    _pinTooltip( targetDomElement, options = { options.text, options.position, options.cssClass } )

    See source

    Pins the tooltip to a specific DOM element.

    Parameters

    targetDomElement : Element
    options : Object
    Properties
    options.text : String

    Text of the tooltip to display.

    options.position : String

    The position of the tooltip.

    options.cssClass : String

    Additional CSS class of the balloon with the tooltip.

  • private

    _unpinTooltip()

    See source

    Unpins the tooltip and cancels all queued pinning.

  • private

    _updateTooltipPosition()

    See source

    Updates the position of the tooltip so it stays in sync with the element it is pinned to.

    Hides the tooltip when the element is no longer visible in DOM.

Static methods