Skip to content
FrameworkJavaScript

Tooltip API: tooltips for your own tool UI

Display tooltip hints on UI elements.

Last updated Oct 7, 2026Edit this page on GitHub

Reaching the editor instance

The methods below run on the editor you created with new Blok(). They are available once editor.isReady resolves.

TypeScript
// You already hold the instance returned by the constructor.
const editor = new Blok({ holder: 'editor' });
await editor.isReady;

// Call any API method on it.
editor.caret.setToLastBlock('end');

Methods

tooltip.show(element, content, options?)

void

Show a tooltip on the specified element.

When to use

Imperatively show a tooltip for one-off cases. For hover behaviour prefer onHover(), which wires the listeners for you.

Parameters

ParameterTypeRequiredDefaultDescription
elementHTMLElementRequired—

Element the tooltip is anchored to.

contentTooltipContentRequired—

Tooltip content: a string, HTMLElement, DocumentFragment or Node.

optionsTooltipOptions—undefined

Placement and timing overrides. onHover() takes the same object.

options.placementstring—'bottom'

Declared as string. The values honored are 'top', 'bottom', 'left' and 'right'. The tooltip auto-flips to the opposite side when the requested side lacks room in the viewport.

options.delaynumber—500

Milliseconds to wait before showing. A hint never shows instantly: values below 300 are raised to 300, and moving to the next trigger waits again.

options.marginTopnumber—0

Extra vertical offset, applied for bottom placement only.

options.marginLeftnumber—0

Extra horizontal offset, applied for left placement only.

options.marginRightnumber—0

Extra horizontal offset, applied for right placement only.

TypeScript
const button = document.querySelector('button');
editor.tooltip.show(button, 'Click to save', {
  placement: 'top',
  delay: 200 // timeout before showing
});

tooltip.hide()

void

Hide the currently visible tooltip.

When to use

Hide whatever tooltip is currently shown. It is safe to call even if none is visible.

TypeScript
editor.tooltip.hide();

tooltip.onHover(element, content, options?)

void

Show tooltip on hover using event listeners, after delay. It takes the same options as show(). Focus does not show it, so a click on the element shows nothing at once.

When to use

The easier choice: a tooltip that shows on hover and hides on leave, without managing listeners yourself.

TypeScript
const button = document.querySelector('button');
editor.tooltip.onHover(button, 'Click me', {
  placement: 'bottom'
});