---
title: "Tooltip API — подсказки show, hide, onHover"
description: "Подсказки для интерфейса вашего инструмента на той же реализации тултипов, что использует сам редактор."
source: https://blokeditor.com/ru/docs/tooltip-api/
lastmod: 2026-10-07
---

Фреймворк JavaScript

Интерфейс Всплывающие подсказки

На этой странице tooltip.show(element, content, options?)

# Tooltip API: подсказки для ваших инструментов

Отображение всплывающих подсказок на элементах интерфейса.

Обновлено 7 окт. 2026 г. [Редактировать на GitHub](https://github.com/JackUait/blok/blob/main/docs/src/components/api/api-data.ts)

### Как получить экземпляр редактора

Методы ниже вызываются на редакторе, созданном через new Blok(). Они доступны после того, как разрешится editor.isReady.

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

## Методы

### tooltip.show(element, content, options?)

void

Показать всплывающую подсказку на указанном элементе.

Когда использовать

Императивно показывает подсказку для разовых случаев. Для наведения предпочитайте `onHover()`, который сам навешивает слушатели.

Параметры

| Параметр | Тип | Обязательный | По умолчанию | Описание |
| --- | --- | --- | --- | --- |
| `element` | `HTMLElement` | Обязательный | — | Элемент, к которому привязана подсказка. |
| `content` | `TooltipContent` | Обязательный | — | Содержимое подсказки: строка, HTMLElement, DocumentFragment или Node. |
| `options` | `TooltipOptions` | — | `undefined` | Переопределения размещения и таймингов. `onHover()` принимает тот же объект. |
| `options.placement` | `string` | — | `'bottom'` | Объявлен как `string`. Учитываются значения 'top', 'bottom', 'left' и 'right'. Подсказка автоматически переворачивается на противоположную сторону, когда запрошенной стороне не хватает места в области просмотра. |
| `options.delay` | `number` | — | `500` | Миллисекунды ожидания перед показом. Подсказка никогда не появляется мгновенно: значения меньше 300 повышаются до 300, а при переходе к следующему триггеру ожидание начинается заново. |
| `options.marginTop` | `number` | — | `0` | Дополнительное вертикальное смещение, применяется только при размещении снизу. |
| `options.marginLeft` | `number` | — | `0` | Дополнительное горизонтальное смещение, применяется только при размещении слева. |
| `options.marginRight` | `number` | — | `0` | Дополнительное горизонтальное смещение, применяется только при размещении справа. |

TypeScript

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

### tooltip.hide()

void

Скрыть текущую видимую подсказку.

Когда использовать

Скрывает текущую подсказку. Вызывать безопасно, даже если ничего не показано.

TypeScript

```
editor.tooltip.hide();
```

### tooltip.onHover(element, content, options?)

void

Показывает подсказку при наведении с помощью слушателей событий, после `delay`. Принимает те же `options`, что и `show()`. Фокус её не показывает, поэтому клик по элементу ничего не открывает сразу.

Когда использовать

Более удобный вариант: подсказка появляется при наведении и скрывается при уходе, без ручного управления слушателями.

TypeScript

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