Фреймворк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

Show a tooltip on the specified element.

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

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

Параметры

Параметр	Тип	Обязательный	По умолчанию	Описание
`element`	`HTMLElement`	Обязательный	—	Element the tooltip is anchored to.
`content`	`TooltipContent`	Обязательный	—	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'. Auto-flipped to the opposite side when the requested side lacks room in the viewport.
`options.delay`	`number`	—	`0`	Milliseconds to wait before showing. Skipped entirely when another tooltip hid within the previous 300 ms, so sweeping across adjacent triggers stays instant.
`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.

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

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

TypeScript

editor.tooltip.hide();

tooltip.onHover(element, content, options?)

void

Show tooltip on hover using event listeners. Takes the same `options` as `show()`, except that keyboard-focus reveals ignore `delay` so keyboard users never wait.

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

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

TypeScript

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