ReadonlyballoonThe instance of the balloon panel that renders and positions the tooltip.
ReadonlytooltipThe view rendering text of the tooltip.
StaticdefaultA set of default module:utils/dom/position~PositioningFunction positioning functions used by the TooltipManager
to pin tooltips in different positions.
Delegates selected events to another module:utils/emittermixin~Emitter. For instance:
emitterA.delegate( 'eventX' ).to( emitterB );
emitterA.delegate( 'eventX', 'eventY' ).to( emitterC );
then eventX is delegated (fired by) emitterB and emitterC along with data:
emitterA.fire( 'eventX', data );
and eventY is delegated (fired by) emitterC along with data:
emitterA.fire( 'eventY', data );
Event names that will be delegated to another emitter.
Destroys the tooltip manager.
Note: The manager singleton cannot be destroyed until all editors that use it are destroyed.
The editor the manager was created for.
Fires an event, executing all callbacks registered for it.
The first parameter passed to callbacks is an module:utils/eventinfo~EventInfo object,
followed by the optional args provided in the fire() method call.
The type describing the event. See module:utils/emittermixin~BaseEvent.
The name of the event or EventInfo object if event is delegated.
Additional arguments to be passed to the callbacks.
By default the method returns undefined. However, the return value can be changed by listeners
through modification of the module:utils/eventinfo~EventInfo#return evt.return's property (the event info
is the first param of every callback).
Registers a callback function to be executed when an event is fired in a specific Emitter or DOM Node. It is backwards compatible with module:utils/emittermixin~Emitter#listenTo.
The object that fires the event.
The name of the event.
The function to be called on event.
Optionaloptions: CallbackOptions & { useCapture?: boolean; usePassive?: boolean }Additional options.
Optional ReadonlyuseCapture?: booleanIndicates that events of this type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree.
Optional ReadonlyusePassive?: booleanIndicates that the function specified by listener will never call preventDefault() and prevents blocking browser's main thread by this event handler.
Registers a callback function to be executed when an event is fired in a specific (emitter) object.
Events can be grouped in namespaces using :.
When namespaced event is fired, it additionally fires all callbacks for that namespace.
// myEmitter.on( ... ) is a shorthand for myEmitter.listenTo( myEmitter, ... ).
myEmitter.on( 'myGroup', genericCallback );
myEmitter.on( 'myGroup:myEvent', specificCallback );
// genericCallback is fired.
myEmitter.fire( 'myGroup' );
// both genericCallback and specificCallback are fired.
myEmitter.fire( 'myGroup:myEvent' );
// genericCallback is fired even though there are no callbacks for "foo".
myEmitter.fire( 'myGroup:foo' );
An event callback can module:utils/eventinfo~EventInfo#stop stop the event and set the module:utils/eventinfo~EventInfo#return return value of the #fire method.
The type describing the event. See module:utils/emittermixin~BaseEvent.
The object that fires the event.
The name of the event.
The function to be called on event.
Optionaloptions: CallbackOptionsAdditional options.
Stops executing the callback on the given event.
Shorthand for #stopListening this.stopListening( this, event, callback ).
The name of the event.
The function to stop being called.
Registers a callback function to be executed when an event is fired.
Shorthand for #listenTo this.listenTo( this, event, callback, options ) (it makes the emitter
listen on itself).
The type descibing the event. See module:utils/emittermixin~BaseEvent.
The name of the event.
The function to be called on event.
Optionaloptions: GetCallbackOptions<TEvent>Additional options.
Registers a callback function to be executed on the next time the event is fired only. This is similar to calling #on followed by #off in the callback.
The type descibing the event. See module:utils/emittermixin~BaseEvent.
The name of the event.
The function to be called on event.
Optionaloptions: GetCallbackOptions<TEvent>Additional options.
Stops delegating events. It can be used at different levels:
Optionalevent: stringThe name of the event to stop delegating. If omitted, stops it all delegations.
Optionalemitter: Emitter(requires event) The object to stop delegating a particular event to.
If omitted, stops delegation of event to all emitters.
Stops listening for events. It can be used at different levels: It is backwards compatible with module:utils/emittermixin~Emitter#listenTo.
Optionalemitter: Node | EventTarget | Emitter | WindowThe object to stop listening to. If omitted, stops it for all objects.
Optionalevent: string(Requires the emitter) The name of the event to stop listening to. If omitted, stops it
for all events from emitter.
Optionalcallback: Function(Requires the event) The function to be removed from the call list for the given
event.
StaticgetReturns #balloonPanelView module:utils/dom/position~PositioningFunction positioning functions for a given position name.
Name of the position (s, se, sw, n, e, or w).
Positioning functions to be used by the #balloonPanelView.
A tooltip manager class for the UI of the editor.
Note: Most likely you do not have to use the
TooltipManagerAPI 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-textattribute on any DOM element: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-positionattribute (s,se,sw,n,e, orw):Disabling tooltips
In order to disable the tooltip temporarily, use the
data-cke-tooltip-disabledattribute:Instant tooltips
To remove the delay before showing or hiding the tooltip, use the
data-cke-tooltip-instantattribute:Styling tooltips
By default, the tooltip has
.ck-tooltipclass and its text inner.ck-tooltip__text.If your tooltip requires custom styling, using
data-cke-tooltip-classattribute will add additional class to the balloon displaying the tooltip: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.