Тултипы для точек навигации

FullPage.js предоставляет мощные возможности для организации скроллинга страниц с разделами и слайдерами. Одной из полезных функций, повышающих юзабилити интерфейса, являются тултипы (tooltips) для навигационных точек. Они помогают пользователю ориентироваться, показывая названия разделов при наведении на точки навигации. Рассмотрим детально, как реализовать и настроить эту функциональность.

Подключение тултипов

Тултипы для навигации в fullPage.js настраиваются через параметр navigationTooltips. Этот параметр принимает массив строк, где каждая строка соответствует одному разделу на странице. Пример базовой настройки:

new fullpage('#fullpage', {
    navigation: true,
    navigationTooltips: ['Главная', 'О нас', 'Услуги', 'Контакты'],
    showActiveTooltip: true,
});

Пояснения к параметрам:

  • navigation: true — включает отображение вертикальных точек навигации справа.
  • navigationTooltips — массив с названиями разделов. Длина массива должна соответствовать количеству секций.
  • showActiveTooltip: true — показывает тултип для активной секции постоянно (не только при наведении).

Если для раздела не указан тултип, при наведении будет отображаться пустое всплывающее окно. Чтобы избежать этого, рекомендуется задать для всех секций соответствующие названия.

Динамическое изменение тултипов

Иногда необходимо менять тултипы на лету, например, в зависимости от состояния страницы или языка интерфейса. Для этого можно использовать метод setTooltip:

fullpage_api.setTooltip(1, 'Главная страница');
fullpage_api.setTooltip(2, 'О нашей команде');

Особенности работы метода:

  • Первый аргумент — индекс секции, начиная с 1.
  • Второй аргумент — новая строка тултипа.
  • Изменение вступает в силу мгновенно, без перезагрузки страницы.

Также можно реализовать массовое обновление тултипов с помощью итерации массива:

const tooltips = ['Главная', 'О нас', 'Услуги', 'Контакты'];

tooltips.forEach((tooltip, index) => {
    fullpage_api.setTooltip(index + 1, tooltip);
});

Стилизация тултипов

По умолчанию тултипы наследуют стандартные стили fullPage.js. Для кастомизации используется CSS-селектор .fp-tooltip. Основные возможности:

/* Цвет фона тултипа */
.fp-tooltip {
    background-color: #333;
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.3s ease;
}

/* Тултип активной секции */
.fp-tooltip.fp-tooltip-active {
    background-color: #007bff;
    font-weight: bold;
}

/* Анимация появления при наведении */
.fp-tooltip.fp-right:hover {
    opacity: 1;
}

Ключевые моменты при стилизации:

  • Позиционирование тултипов задается классами .fp-tooltip.fp-right (по умолчанию справа) и .fp-tooltip.fp-left при необходимости изменения направления.
  • Плавность анимации достигается через CSS-свойства transition и opacity.
  • Размер и отступы нужно подбирать так, чтобы тултипы не перекрывали содержимое страницы.

Работа с мультиязычными интерфейсами

Для сайтов с несколькими языками удобно использовать массивы тултипов, которые меняются в зависимости от выбранного языка:

const tooltipsEn = ['Home', 'About', 'Services', 'Contacts'];
const tooltipsRu = ['Главная', 'О нас', 'Услуги', 'Контакты'];

function setLanguage(lang) {
    const tooltips = lang === 'ru' ? tooltipsRu : tooltipsEn;
    tooltips.forEach((tooltip, index) => {
        fullpage_api.setTooltip(index + 1, tooltip);
    });
}

Это позволяет динамически подстраивать интерфейс под пользователя без перезагрузки страницы.

Отображение тултипов только при наведении

Иногда нужно, чтобы тултипы показывались только при наведении. Для этого используется параметр showActiveTooltip:

new fullpage('#fullpage', {
    navigation: true,
    navigationTooltips: ['Главная', 'О нас', 'Услуги', 'Контакты'],
    showActiveTooltip: false,
});

В этом случае активная секция не подсвечивает тултип постоянно, а всплывающее окно появляется только при наведении на точку.

Взаимодействие с мобильными устройствами

На мобильных устройствах тултипы работают нестабильно из-за отсутствия hover-событий. Рекомендуется:

  • Использовать тултипы только как дополнительный элемент интерфейса.
  • Для навигации на мобильных включать текстовые ссылки или фиксированные меню.
  • При необходимости имитировать hover через touchstart и touchend события с помощью JavaScript.

Пример эмуляции на мобильных:

document.querySelectorAll('.fp-tooltip').forEach(el => {
    el.addEventListener('touchstart', () => el.classList.add('fp-tooltip-active'));
    el.addEventListener('touchend', () => el.classList.remove('fp-tooltip-active'));
});

Советы по оптимизации

  • Количество секций: массив navigationTooltips должен точно соответствовать количеству секций, иначе тултипы могут отображаться некорректно.
  • Длина текста: избегать длинных тултипов, чтобы они не выходили за пределы окна.
  • CSS-переопределение: при кастомизации стилей лучше использовать специфические селекторы для предотвращения конфликта с глобальными стилями.

Эти подходы позволяют создавать удобные, информативные и визуально привлекательные тултипы для точек навигации в fullPage.js, повышая интерактивность и понятность интерфейса.

Оглавление