ФреймворкJavaScript

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

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

Обновлено 7 окт. 2026 г.Редактировать на GitHub

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

Методы ниже вызываются на редакторе, созданном через 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'
});