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

Фреймворк JavaScript

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

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

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

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

[Редактировать на 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` | — | `0` | Миллисекунды ожидания перед показом. Полностью пропускается, если другая подсказка скрылась в предыдущие 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

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

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

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

TypeScript

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