ФреймворкJavaScript

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

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

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

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