Подсказки

Чтобы показать всплывающую подсказку при наведении курсора на объект, нужно создать HTML-элемент и показывать/скрывать его в обработчиках событий mouseover и mouseout.

Подсказка для маркера

Например, чтобы добавить подсказку для маркера, нужно добавить обработчики для событий mouseover и mouseout при помощи метода on():

marker.on('mouseover', (e) => {
    console.log('курсор перешёл на маркер');
});
marker.on('mouseout', (e) => {
    console.log('курсор покинул маркер');
});

Основной смысл в том, чтобы показать HTML-элемент в обработчике mouseover и скрыть его в обработчике mouseout. Координаты для показа элемента можно получить через объект события (см. MapPointerEvent).

Перед показом элемент нужно скрыть и указать абсолютное позиционирование (position: absolute; или position: fixed;). Кроме этого, нужно указать для свойства pointer-events значение none или добавить небольшой отступ для элемента. Если этого не сделать, подсказка будет показана прямо под курсором, что приведет к событию mouseout, обработчик которого скроет подсказку.

Пример разметки для простой подсказки:

<style>
    #tooltip {
        padding: 20px 40px;
        background: #fff;
        display: none;
        position: fixed;
        pointer-events: none;
    }
</style>
<div id="tooltip">Hello, world!</div>

Примера кода, который покажет подсказку при наведении курсора на маркер:

const tooltipEl = document.getElementById('tooltip');

marker.on('mouseover', (event) => {
    // Отступ в пикселях
    const offset = 5;

    tooltipEl.style.top = `${event.point[1] + offset}px`;
    tooltipEl.style.left = `${event.point[0] + offset}px`;
    tooltipEl.style.display = 'block';
});

marker.on('mouseout', (e) => {
    tooltipEl.style.display = 'none';
});

Полный пример кода приведён ниже. Наведите курсор на маркер, чтобы увидеть подсказку.

Подсказка для геометрической фигуры

Подсказки можно добавлять и для других типов объектов. Например, чтобы добавить подсказку для линии, нужно добавить обработчики для тех же двух событий mouseover и mouseout, которые были использованы в примере выше.

Далее приведён полный пример кода. Чтобы увидеть подсказку, наведите курсор на линию.