Skip to content
FrameworkJavaScript

Tooltip API: tooltips for your own tool UI

Display tooltip hints on UI elements.

Edit 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.

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

When to use

The ergonomic 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'
});