---
title: "Blok Tooltip API — show, hide, onHover"
description: "Attach tooltips to your own tool UI using the editor's own tooltip implementation."
source: https://blokeditor.com/docs/tooltip-api/
lastmod: 2026-10-07
---

Framework JavaScript

Interface Tooltip

On this page tooltip.show(element, content, options?)

# Tooltip API: tooltips for your own tool UI

Display tooltip hints on UI elements.

Last updated Oct 7, 2026 [Edit this page on GitHub](https://github.com/JackUait/blok/blob/main/docs/src/components/api/api-data.ts)

### 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

| 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'. The tooltip auto-flips to the opposite side when the requested side lacks room in the viewport. |
| `options.delay` | `number` | — | `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.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()

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