TooltipManager (ui)
@ckeditor/ckeditor5-ui/src/tooltipmanager
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
module:ui/tooltipmanager~TooltipManager#balloonPanelView
The instance of the balloon panel that renders and positions the tooltip.
-
The view rendering text of the tooltip.
-
private readonly
_currentElementWithTooltip : HTMLElement | null
module:ui/tooltipmanager~TooltipManager#_currentElementWithTooltip
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
module:ui/tooltipmanager~TooltipManager#_currentTooltipPosition
Stores the current tooltip position.
null
when there's no tooltip in the UI. -
private readonly
_pinTooltipDebounced : function
module:ui/tooltipmanager~TooltipManager#_pinTooltipDebounced
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>
module:ui/tooltipmanager~TooltipManager.defaultBalloonPositions
A set of default positioning functions used by the
TooltipManager
to pin tooltips in different positions. -
An array of editors the single tooltip manager instance must listen to. This is mostly to handle
EditorUI#update
listeners from individual editors. -
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 )
module:ui/tooltipmanager~TooltipManager#constructor
-
destroy( editor )
module:ui/tooltipmanager~TooltipManager#destroy
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.
-
Handles displaying tooltips on
mouseenter
andfocus
in DOM.Parameters
evt : EventInfo
An object containing information about the fired event.
domEvent : Event
The DOM event.
-
Handles hiding tooltips on
mouseleave
andblur
in DOM.Parameters
evt : EventInfo
An object containing information about the fired event.
domEvent : Event
The DOM event.
-
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 } )
module:ui/tooltipmanager~TooltipManager#_pinTooltip
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.
-
Unpins the tooltip and cancels all queued pinning.
-
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
-
static
getPositioningFunctions( position ) → Array.<PositioningFunction>
module:ui/tooltipmanager~TooltipManager.getPositioningFunctions
Returns
balloonPanelView
positioning functions for a given position name.Parameters
position : String
Name of the position (
s
,se
,sw
,n
,e
, orw
).
Returns
Array.<PositioningFunction>
Positioning functions to be used by the
balloonPanelView
.
Every day, we work hard to keep our documentation complete. Have you spotted outdated information? Is something missing? Please report it via our issue tracker.