FrameworkJavaScript
Tooltip API: tooltips for your own tool UI
Display tooltip hints on UI elements.
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?)
voidShow 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
| Parameter | Type | Required | Default | Description |
|---|---|---|---|---|
element | HTMLElement | Required | — | Element the tooltip is anchored to. |
content | TooltipContent | Required | — | Tooltip content — a string, HTMLElement, DocumentFragment or Node. |
options | TooltipOptions | — | undefined | Placement and timing overrides. onHover() takes the same object. |
options.placement | string | — | 'bottom' | Declared as string; the values honored are 'top', 'bottom', 'left' and 'right'. Auto-flipped to the opposite side when the requested side lacks room in the viewport. |
options.delay | number | — | 0 | Milliseconds to wait before showing. Skipped entirely when another tooltip hid within the previous 300 ms, so sweeping across adjacent triggers stays instant. |
options.marginTop | number | — | 0 | Extra vertical offset, applied for bottom placement only. |
options.marginLeft | number | — | 0 | Extra horizontal offset, applied for left placement only. |
options.marginRight | number | — | 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()
voidHide 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?)
voidShow tooltip on hover using event listeners. Takes the same `options` as `show()`, except that keyboard-focus reveals ignore `delay` so keyboard users never wait.
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'
});